DEV Community

Pawar Shivam
Pawar Shivam

Posted on

๐Ÿš€ Tired of Swiper.js stopping between slides? Hereโ€™s how to make it scroll continuously (like a marquee)

SwiperJS #FrontendTips #CSSTrick

Have you ever wanted your Swiper slider to move non-stop, without pausing between slides?

Maybe youโ€™re building a logo carousel, news ticker, or a smooth testimonial slider. Well, hereโ€™s a quick fix to get that classic marquee effect using just a bit of CSS and config tweaks.

.swiper-wrapper {
  transition-timing-function: linear;
}

Enter fullscreen mode Exit fullscreen mode
speed: 5000,
autoplay: {
  delay: 1,
  disableOnInteraction: false,
}

Enter fullscreen mode Exit fullscreen mode

Thatโ€™s it! You now have a Swiper that scrolls seamlessly โ€” no pause, just smooth motion. ๐ŸŒ€

Tip: Lower speed values = faster scrolling.

๐Ÿงช Tested on Swiper v8.4.5. Letโ€™s hope this becomes an official feature in future versions!

Have you tried this? Got a better way to do it? Share below โ€” Iโ€™d love to see your versions!

Top comments (0)