How to build a Webflow CMS slider with Swiper

Choose CMS fields around the slide content

Create one collection for the repeated content. A testimonial slider might need a quote, person, role, company, portrait, sort order, and optional link. A product slider may need a title, image, summary, category, and destination URL.

Keep decorative settings outside the collection unless editors genuinely need to control them. Content fields should describe content, while layout and motion remain part of the component.

• Required text, image, link, and accessibility fields
• Explicit numeric sort order when editorial order matters
• Fallback behavior for missing optional content
• Realistic short and long CMS examples

Map the Collection List to Swiper structure

Swiper expects a container, a wrapper, and slide children. In Webflow, the Collection List Wrapper becomes the Swiper container, the Collection List becomes the wrapper, and every Collection Item becomes one slide.

Add a unique component class alongside the required Swiper classes. The unique class lets the script target this slider without accidentally initializing every slider on the page with the same options.

• Collection List Wrapper: swiper and js-cms-slider
• Collection List: swiper-wrapper
• Collection Item: swiper-slide
• Buttons outside the Collection List but inside the component

Load Swiper and initialize the CMS slider

Add the Swiper stylesheet in the page head and load the bundle before the closing body tag. The official Swiper documentation currently provides version 12 CDN assets for direct browser use.

Initialize after the DOM is ready. Scoping controls to each component prevents one slider from controlling another when the page contains multiple instances.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
  document.querySelectorAll('.js-cms-slider').forEach((element) => {
    const component = element.closest('.cms-slider-component') || element;

    new Swiper(element, {
      slidesPerView: 1.1,
      spaceBetween: 16,
      watchOverflow: true,
      keyboard: { enabled: true },
      a11y: {
        prevSlideMessage: 'Previous slide',
        nextSlideMessage: 'Next slide',
      },
      navigation: {
        nextEl: component.querySelector('.js-slider-next'),
        prevEl: component.querySelector('.js-slider-prev'),
      },
      breakpoints: {
        768: { slidesPerView: 2, spaceBetween: 24 },
        992: { slidesPerView: 3, spaceBetween: 28 },
      },
    });
  });
</script>

Protect accessibility and responsive behavior

Use real button elements for previous and next controls, provide visible focus states, and keep meaningful links inside each slide keyboard accessible. Do not rely on drag gestures as the only control method.

Avoid autoplay unless it supports a clear requirement. If autoplay is necessary, provide a pause control, stop it during interaction, and respect reduced-motion preferences.

• Keyboard-operable previous and next buttons
• Visible focus indicators and readable control labels
• No essential information hidden only in inactive slides
• Reduced-motion and autoplay behavior reviewed

Test CMS limits and common failure modes

Test with fewer slides than the desktop slides-per-view setting. Swiper can appear broken when looping is enabled without enough items, so use watchOverflow and enable loop only when the content model guarantees sufficient slides.

If filtering or pagination changes the collection after initialization, update or recreate the Swiper instance after the CMS tool finishes changing the DOM. Also check hidden tabs, modal sliders, image loading, and multiple component instances.

• One item, two items, and the expected maximum tested
• Long titles and missing optional images tested
• Multiple sliders initialized independently
• CMS filters, tabs, modals, and dynamic updates verified