Is there a way to snap the slides to center when swiped or dragged?

[Keshavdulal]

Hi,

I am switching from swiper ~140KiB to this library as it ultra-lightweight and don't expect everything to be here but if there is a way to snap the slides to center when swiped or dragged, that would be great.

Current Behaviour When swiped or dragged, the slides remain in place where they were left off. They don't snap back to center.

Current Implementation Code

<Glider className="glider-container" draggable hasDots slidesToShow={1}>

Wanted Behaviour When swiped or dragged the slides snap to center, just like when you click the arrows or dots.

Thanks

[Keshavdulal]

        scrollLock={true}
        scrollLockDelay={0}

This gives me kind of close-enough snap behavior I wanted but is still leaves the slides hanging on the sides and doesn't snap back or ahead.

Full Component

   <Glider
        className="glider-container"
        draggable
        hasDots
        slidesToShow={1}
        scrollLock={true}
        scrollLockDelay={0}
      >

[kevinfarrugia]

Hi @Keshavdulal .

If you remove the draggable, can you confirm the issue no longer exists please? (trying to fully understand the issue)

[kevinfarrugia]

@Keshavdulal fixed in #140

Test Environment: https://react-glider-git-scroll-snap-kevinfarrugia.vercel.app/

[kevinfarrugia]

The easiest solution is to add the following CSS to the glider and set scrollLock: false

.glider {
  scroll-snap-type: x mandatory;
  scroll-padding: 0px;
}

and to the slide

.slide {
  scroll-snap-align: start;
}

[ElSeniorMikael]

@kevinfarrugia Do you lose the ability to drag the slider ? because when i add this CSS to the slider, it wont scroll by draging it

[kevinfarrugia]

Yes, currently if you add this CSS then you lose the draggable on desktop devices. It remains draggable on touch devices. I haven't. Wen able to find a workaround yet.