shadcnuiembla-carousel

swiping fast to skip multiple slides return the next slide (embla-carousel)

i'm encountering unexpected behavior in my carousel component when using multiple sliders per view. When I adjust the basis property to achieve a layout with 33.3333% width for each slider, and attempt to swipe quickly to skip multiple slides (e.g., from slide 1 to slide 4), the carousel snaps back to slide 2.

comparison between swiper and embla : https://vimeo.com/937262995?share=copy

codesandbox link : https://codesandbox.io/p/sandbox/carousel-wmzl49

Solution

  • This is the default behavior. Set the skipSnaps option to true and you’ll be good to go. Here’s how to pass options to your Embla Carousel using Shadcn UI:

    <Carousel
  opts={{
    skipSnaps: true
  }}
>
 …
</Carousel>