Prevent slides from snapping

[Whaitiri]

Hi there, I'm using your carousel on a site to create a browseable book repository. I want to use your sliders on our main navigation, however I'm having trouble getting the sliders to stop snapping to the nearest visible slide when sliding ceases. Is there any way to deal with this?

[tim-steele]

@Whaitiri we implemented this as a way to prevent the carousel from causing scrolling issues on small screens like mobile devices.

It may make sense to make the snap-to-slide functionality a property or flag.

[Whaitiri]

Thanks for this. I've since realised that such an implementation is rather simple with CSS, although having stuff like buttons and dots would be nice if it is ever included in pure-react-carousel.

[mrbinky3000]

Well, we at Express are going to have to build this feature into the Carousel for an upcoming change. So, I'll most likely be working on this one. Assigning to me.

[madebyaaron]

Hi there, great plugin guys! Is this issue still being worked on? if not, is there a workaround for this? Apologies if i've missed it in the docs!

[mimiqkz]

Is this still in WIP since 2018?

[tomsherlocked]

Hey all - I've just stumbled across this issue as I'm looking to achieve the same behaviour myself. Is this issue still in progress - If not is it something I should look into picking up and sending a PR for? Thanks 👍

[rscotten]

@mrbinky3000 a non-step option is desirable because on mobile screens, the steps are clunky and a smooth scrolling behavior is preferred.

Somebody might say "just use a CSS-only carousel for mobile, then"

I understand this can be easily implemented via CSS (which is my current solution), but then the DOM ends up having two carousels; one for mobile and another for non-mobile screens, which can cause the "excessive DOM elements" error in Lighthouse for core vitals performance analysis. In this case, CSS is hiding one or the other based on screen size.

Using JS to conditionally display the Pure React Carousel or the free scrolling CSS-only version is not practical for statically generated websites (e.g. NextJS static export), where the DOM is pre-rendered at build-time using a mobile screen size and the CSS-only carousel. When the DOM has to update to the Pure React Carousel when hydrating on Desktop screens, this causes unwanted Cumulative Layout Shift and increases the Time to Interactive.

So, the elegant solution would be just to have one carousel and have a prop to disable the stepping on mobile.

Is this acceptable? If so, I'd be happy to submit a PR.

[michael-alterio]

I am also looking for this feature!