Fix media position

Vizzuality · Dec 4, 2024 · f11178e · f11178e
1 parent 3001c48
commit f11178e
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/client/src/components/ui/carousel/index.tsx b/client/src/components/ui/carousel/index.tsx
@@ -188,20 +188,19 @@ type PropType = PropsWithChildren & {
 };
 
 const EmblaCarousel: React.FC<PropType> = ({ options, medias, selected }) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel(options);
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    startIndex: selected,
+    align: 'center',
+    inViewThreshold: 0.5,
+    ...options,
+  });
   const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);
   // const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } =
   //   usePrevNextButtons(emblaApi);
 
   const [currSlider, setCurrSlider] = useState(0);
 
-  useEffect(() => {
-    if (selected !== undefined && emblaApi) {
-      emblaApi.scrollTo(selected);
-      setCurrSlider(selected);
-    }
-  }, [selected, emblaApi]);
-
   const handleSelectedSlide = useCallback((embla: EmblaCarouselType) => {
     setCurrSlider(embla.selectedScrollSnap());
   }, []);
@@ -223,7 +222,9 @@ const EmblaCarousel: React.FC<PropType> = ({ options, medias, selected }) => {
             <div
               className={cn(
                 'embla__slide flex-[0_0_60%] pl-4 sm:pl-10',
-                index === currSlider ? 'h-[80vh]' : 'h-[40vh]'
+                index === currSlider ? 'h-[80vh]' : 'h-[40vh]',
+                medias.length === 2 && index === 0 && 'ml-[20%]',
+                medias.length === 2 && index === 1 && 'mr-[20%]'
               )}
               key={index}
             >