Swiper.js continuous autoplay (like marquee)

1 min read / Scripts, Swiper.js / Share on: Twitter, LinkedIn, Facebook

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.

4 comments