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)