dynamicweb / swiffy-slider

Super fast carousel and slider with touch for optimized websites running in modern browsers.
MIT License
247 stars 30 forks source link

Slider carousel nowrap or rewind behavior #35

Closed jklue closed 2 years ago

jklue commented 2 years ago

I have a page topper slider on autoplay, but the rewind effect when the slider starts over is distracting as it slides left though all the slides already seen.

Is there a way to make the slides wrap, so after the last slide, it continues to auto play to the right, more like a carousel?

Here's a quick clip showing the default slider behavior I see now with two test slides: https://www.dropbox.com/s/juab27hic4ablyq/swiffy-slider-carousel-question.mp4?dl=0

nicped commented 2 years ago

Yes, this is one of the limitations of Swiffy Slider due to how it works.

To do infinite scroll, javascript is required to move the first slide as the next or place slides on top of each other and animate them (and that would require js to handle touch sliding) - this slider is created to avoid all of that. The main feature of Swiffy Slider is to support touch based scroll with almost zero performance impact using the device scrolling mechanism.

So since the slides are grid columns in a scrollable div placed next to each other, they cannot blend into each other (as that would require the slides are placed on top of each other) and the slides cannot go infinite rounds as that again would require slides on top of each other or changing the order of slides as you slide right.

The only solution I have for that is to repeat slide 1+2 a number of times so it looks like infinite (users will not look at the frontpage for ages anyways) - the markup overhead would be minimal, and the images are already loaded. Sounds like a clunky solution, but I guarantee that it is faster and takes less performance that using a slider that can do that using 25+kb of js.