6 replies

Help with react carousel

Hey is someone here good with react carousel libraries?
I need to accomplish something like this with the non focused cards in the carousel being stacked be under the focused one. I tried the one in shadcn but that got me nowhere.
TLDR. What do you use for Carousel? && Is this achievable ?
TY

Carousel

A carousel with motion and swipe built using Embla.

Solution

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

This is how i solved the issue

Jump to solution

TTC

Theo's Typesafe Cult•16mo ago•

6 replies

dzenda

Help with react carousel

Carousel

A carousel with motion and swipe built using Embla.

Solution

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

        
<div
className="relative mx-4 max-w-[1050px] flex-[0_0_80%] transition-all duration-300 ease-in-out"/>

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    containScroll: 'trimSnaps', //this line
  });

This is how i solved the issue

Jump to solution

Help with react carousel

Help with react carousel

Similar Threads

Similar Threads

Similar Threads