fix: smooth loop + draggable carousel

Author: r3yc0n1c

components/Header/header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Heading from '../Typography/heading';
 import Paragraph from '../Typography/paragraph';
 import Button from '../Buttons/button';
-import ReactSlider from '../Slider/slider';
+import EmblaCarousel from '../Slider/slider';
 import cities from '../../config/city-lists.json';
 import Venue from '../Venue/venue';
 import Announcement from '../announcement';
@@ -11,6 +11,10 @@ import { useMediaQuery } from 'react-responsive';
 
 function Header() {
 	const isMobile = useMediaQuery({ maxWidth: '590px' });
+	const SLIDES = cities.map((city) => {
+		return <Venue key={city.name} city={city}/>;
+	})
+
 	return (
 		<div className='relative'>
 			<div className='container w-full flex items-center justify-center'>
@@ -46,11 +50,7 @@ function Header() {
 				</div>
 			</div>
 			<div className='mt-24'>
-			    <ReactSlider>
-					{cities.map((city) => {
-						return <Venue key={city.name} city={city}/>;
-					})}
-				</ReactSlider>
+			    <EmblaCarousel slides={SLIDES} />
 			</div>
 		</div>
 	);

components/Slider/slider.js

@@ -1,39 +1,44 @@
-import Slider from 'react-slick';
-import Arrow from '../illustration/arrow';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import AutoScroll from 'embla-carousel-auto-scroll'
 import { useMediaQuery } from 'react-responsive';
 
-function ReactSlider({ children }) {
+
+function EmblaCarousel({ slides }) {
 	const isMobile = useMediaQuery({ maxWidth: '590px' });
-	const [slides, setSlides] = useState(1);
+	
+	const scrollOptions = {
+		playOnInit: true,
+		stopOnInteraction: false,
+		stopOnMouseEnter: true,
+		startDelay: 200,
+		speed: 1
+	}
 
-	useEffect(() => {
-		if (isMobile) {
-			setSlides(1);
-		}
-	}, [isMobile]);
-	const slider = useRef(null);
-	const settings = {
-		slidesToScroll: slides,
-		infinite: true,
-		autoplay: true,
-		speed: 10000,
-		autoplaySpeed: 0,
-		centerMode: true,
-		cssEase: 'linear',
-		variableWidth: isMobile ? false : true,
-		arrows: false,
-	};
+	const options = {
+		loop: true, 
+		dragFree: true
+	}
+	
+	const [emblaRef] = useEmblaCarousel({ ...options }, [
+		AutoScroll({ ...scrollOptions })
+	]);
 
 	return (
 		<>
-		{ children.length > 4 || isMobile ? 
-		(<Slider ref={slider} {...settings}>
-			{children}
-		</Slider>):(
-	       <div className='flex m-2 justify-center'>{children}</div>)}
-	    </>
+			{slides.length > 4 || isMobile ? (
+				<div className="embla" ref={emblaRef}>
+					<div className="embla__container">
+						{slides.map((item, idx) => (
+							<div className="embla__slide" key={`embla__slide_${idx}`}>{item}</div>
+						))}
+					</div>
+				</div>
+			) : (
+				<div className='flex m-2 justify-center'>{slides}</div>
+			)}
+		</>
 	);
 }
 
-export default ReactSlider;
+export default EmblaCarousel;

package-lock.json

@@ -17,6 +17,8 @@
     "@googleapis/sheets": "^7.0.0",
     "axios": "^1.7.4",
     "d3": "^7.8.5",
+    "embla-carousel-auto-scroll": "^8.5.1",
+    "embla-carousel-react": "^8.5.1",
     "lucide-react": "^0.350.0",
     "net": "^1.0.2",
     "next": "^14.2.10",
@@ -32,7 +34,6 @@
     "react-hot-toast": "^2.4.1",
     "react-responsive": "^9.0.0",
     "react-select": "^5.7.5",
-    "react-slick": "^0.29.0",
     "react-youtube-embed": "^1.0.3",
     "slick-carousel": "^1.8.1"
   },

package.json

@@ -69,6 +69,17 @@ body {
   bottom: 0 !important;
 }
 
+.embla {
+  overflow: hidden;
+}
+.embla__container {
+  display: flex;
+}
+.embla__slide {
+  flex: 0 0 75%;
+  min-width: 0;
+}
+
 .gradient-bg {
    background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%) !important;
    -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);