Sunday, January 08, 2023
The Great Tit
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.

Did I help you? Fuel our WordPress journey
Beep this article to your friends!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 comments on “Swiper.js continuous autoplay (like marquee)”

  1. 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?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram