Embla-carousel: Scroll one slide at a time

[patrickhuang94]

Hi David! Thank you for your work on embla-carousel, it's been a joy to use so far in my project :)

Is it possible to move one slide at a time when slidesToScroll is set to 2 or more? This is what I'm asking for, visualized:

Expected:

What's happening:

Sandbox: https://codesandbox.io/s/embla-carousel-default-react-forked-scfoz?file=/src/js/EmblaCarousel.js

[davidcetinkaya]

Hi Patrick (@patrickhuang94),

Thank you for your question. Based on your description, I think you're looking for the align option rather than slidesToScroll. Because the purpose of slidesToScroll is to merge slides into the given number and make them act as if it was a single slide. Let's take slidesToScroll: 2 as an example:

As you can see, Embla treats every 2 slides as if it was a single slide behind the scenes. In order to achieve what you want, you'll have to do the following:

• Create a carousel and set slide widths to 50% each.
• Add the option align: 'start' because we want the slides to align to the left edge of the viewport.
• Add the option containScroll: 'trimSnaps' to trim any leading/trailing scroll space.
• Leave the slidesToScroll option to its default value which is 1.

Take a look at this CodeSandbox I created for you and let me know if it helps.

Best,
David

[patrickhuang94]

@davidcetinkaya this is exactly what I was looking for. Thank you for the breakdown!

[davidcetinkaya]

You’re welcome @patrickhuang94. Enjoy!