The Slider is skipping other items

Hello, when users swipe hard enough it looks like its skipping other slides, how can we limit it to only one slide per swipe? slidesToScroll: 1 doesn’t seem to do anything

const wrap = document.querySelector('.js-home-slider');
  const viewPort = wrap.querySelector('.js-home-slider-viewport');
  const dots = wrap.querySelector('.js-home-slider-dots');
  const homesliderStart = EmblaCarousel(viewPort, {
    loop: true,
    draggable: true,
    dragFree: false,
    speed: 10,
    startIndex: 0,
    slidesToScroll: 1,
  });

[davidjerleke]

Hello @leah-cc, Thank you for your question 👍.

The short answer is:

That this is by design and it’s intended to work this way.

The long answer is:

That the Embla Carousel animation engine is different from other carousel plugins. It animates by simulating physics and I made this design choice because I wanted a carousel that feels natural to drag and interact with. If I were to limit swipe gestures to progress only one slide, no matter how vigorous the swipe gesture was, that would make the movement arbitrary as opposed to natural, and would go against the very core of how Embla works.

Most available carousel plugins only determine which direction the carousel was dragged and decide whether the carousel should move to the next or the previous slide. If you think about it, this behavior is very unnatural. Because if you were to drag something in real life with a lot of force, it would move further away than if you were to drag it with less force. So Embla not only determines which direction the carousel was dragged, it also measures the drag force. Based on the drag force it will or will not skip slides. It all depends how hard the users drag it.

We have a new browser standard emerging for horizontal (and vertical) scroll areas on websites called CSS scroll snaps, and they also work this way. If you’re interested, take a look at this CSS scroll snap example and try dragging it on mobile. I decided to go with the same drag design choice for Embla Carousel. I hope I’ve managed to explain why I made this choice and that all of this makes sense to you.

Kindly, David

[davidjerleke]

@jeiea this feature has just been released with v4.5.0. Thank you for taking time to test this out.

Enjoy, David