Add files via upload

carousels/new-crsl/src/js/EmblaCarousel.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { EmblaOptionsType } from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
+import Autoplay from 'embla-carousel-autoplay'
+import imageByIndex from './imageByIndex'
+
+type PropType = {
+  slides: number[]
+  options?: EmblaOptionsType
+}
+
+const EmblaCarousel: React.FC<PropType> = (props) => {
+  const { slides, options } = props
+  const [emblaRef] = useEmblaCarousel(options, [Autoplay()])
+
+  return (
+    <div className="embla">
+      <div className="embla__viewport" ref={emblaRef}>
+        <div className="embla__container">
+          {slides.map((index) => (
+            <div className="embla__slide" key={index}>
+              <div className="embla__slide__number">
+                <span>{index + 1}</span>
+              </div>
+              <img
+                className="embla__slide__img"
+                src={imageByIndex(index)}
+                alt="Your alt text"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EmblaCarousel

carousels/new-crsl/src/js/Footer.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Footer: React.FC = () => (
+  <footer className="sandbox__footer">
+    <a
+      className="sandbox__footer__link"
+      href="https://github.com/davidjerleke/embla-carousel"
+    >
+      <svg
+        className="sandbox__footer__link__svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+      </svg>
+      <span className="sandbox__footer__link__text">Visit on GitHub</span>
+    </a>
+  </footer>
+)
+
+export default Footer

carousels/new-crsl/src/js/Header.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Header: React.FC = () => (
+  <header>
+    <h1 className="sandbox__header">Embla Carousel Autoplay React</h1>
+  </header>
+)
+
+export default Header

carousels/new-crsl/src/js/imageByIndex.ts

@@ -0,0 +1,10 @@
+import image1 from '../images/slide-1.jpg'
+import image2 from '../images/slide-2.jpg'
+import image3 from '../images/slide-3.jpg'
+import image4 from '../images/slide-4.jpg'
+
+export const images: string[] = [image1, image2, image3, image4]
+
+const imageByIndex = (index: number): string => images[index % images.length]
+
+export default imageByIndex

carousels/new-crsl/src/js/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import EmblaCarousel from './EmblaCarousel'
+import { EmblaOptionsType } from 'embla-carousel'
+import Header from './Header'
+import Footer from './Footer'
+import '../css/base.css'
+import '../css/sandbox.css'
+import '../css/embla.css'
+
+const OPTIONS: EmblaOptionsType = {}
+const SLIDE_COUNT = 5
+const SLIDES = Array.from(Array(SLIDE_COUNT).keys())
+
+const App: React.FC = () => (
+  <main className="sandbox">
+    <Header />
+    <section className="sandbox__carousel">
+      <EmblaCarousel slides={SLIDES} options={OPTIONS} />
+    </section>
+    <Footer />
+  </main>
+)
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)