Merge pull request #30 from osakunta/fix-carousel

fix carousel effect not working on page load
osakunta · Aug 30, 2024 · 29e83df · 29e83df
2 parents bfac6e3 + 3b8e574
commit 29e83df
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/components/Carousel.tsx b/components/Carousel.tsx
@@ -22,11 +22,10 @@ const wrappedDistance = (a: number, b: number) => {
 
 const setOpacity = (emblaApi: EmblaCarouselType) => {
   const slideNodes = emblaApi.slideNodes();
-  const slidesInView = emblaApi.slidesInView();
 
   const currentPosition = emblaApi.scrollProgress();
 
-  slidesInView.forEach((slideIndex) => {
+  slideNodes.forEach((_, slideIndex) => {
     const slidePosition = emblaApi.scrollSnapList()[slideIndex];
     const opacity = clamp(
       1 - wrappedDistance(slidePosition, currentPosition) * 8.4,
@@ -48,6 +47,7 @@ const Carousel: React.FC<PropType> = ({ slides, options }) => {
   useEffect(() => {
     if (!emblaApi) return;
 
+    setOpacity(emblaApi);
     emblaApi.on("reInit", setOpacity).on("scroll", setOpacity);
   }, [emblaApi]);