Author is Aleš Sýkora
Updated: 30. 1. 2023, Added: 8. 1. 2023
Swiper.js continuous autoplay (like marquee)
The autoplay of Swiper.js stops on each slide when moving. If you rather want to play like marquee and continue moving/sliding, then you just need to edit the CSS and Swiper config. Maybe it will be available in Swipers API in future, but currently (swiper 8.4.5) it is not.
Add a custom CSS:
.swiper-wrapper {
transition-timing-function: linear;
}And in your swiper initialization function add these:
speed:5000,
autoplay: {
delay: 1,
disableOnInteraction: false,
}And now, take a seat and enjoy a marquee effect! You can tune the speed of slider with speed value.
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
I've found this useful, but the slider tends to stutter. If enable "cssMode" then the stuttering stops, but then I don't have freemode. Have you been able to figure out any way to have the best of both worlds?
Hello Adam, I am not sure why it stutter for you. Mine works fine. Maybe it depends on browser?... Can you share the URL? look at mine here: https://www.pixbot.cz/ in my browser (firefox for developers and MS Edge) it's completely fine :/
Great!
Good! 🙂