ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Developer tools · #swiper
Stop browser lag in large carousels. Learn how to use Swiper's Virtual Slides to render thousands of items while keeping the DOM footprint minimal.
Learn how to implement Swiper.js Virtual Slides to handle large datasets without crashing the browser. This guide covers modular setup, DOM recycling, and performance verification.
Stop DOM bloat in large carousels. Learn how to use Swiper's Virtual Slides to render thousands of items efficiently by recycling DOM nodes.
Learn how to enable Swiper’s Lazy module, mark images with data-src, add a preloader, and configure lazy loading options to defer image loading until a slide is visible.
I'm building a carousel with Swiper (v8) where each slide contains interactive elements—links and a small form—and I need reliable keyboard and screen-reader support. The decision I'm stuck on is whether to enable Swiper's built-in a11y module or disable it and manage focus and announcements myself. The built-in module adds ARIA roles, labels, and arrow-key
Loop mode offsets after the v9 rewrite After migrating a carousel from Swiper 8 to Swiper 11, I am reworking a configuration that uses loop: true , slidesPerView: 'auto' , and centeredSlides: true . Since v9 rearranges the real slide elements instead of cloning them, my old code that relied on duplicated slides and activeIndex no longer maps cleanly to what
The goal is to minimize UI stutter caused by rapid resize events when multiple Swiper instances experience concurrent layout changes, while still ensuring slide dimensions remain accurate for features like virtual slides and lazy loading. In Swiper v8‑v9 the built‑in ResizeObserver does not debounce rapid resize notifications, which can trigger repeated dime