Aleš Sýkora / January 8, 2023 / 4 comments

Swiper.js continuous autoplay (like marquee)

Post summary: Set Swiper.js move to work 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.

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

4 comments

Share Your Thoughts