#Swiper Studio + Webflow: Syncing Slides

This tutorial article was written and originally published by our partner 3SIX5 Digital.

When you're building sliders in Swiper Studio for Webflow, the power really shines when your slides sync with content blocks elsewhere on the page. Instead of duplicating content inside the slider, you can keep content structured in Webflow and tie it to your Swiper slides with simple data attributes.

const x = '52';

This method lets you:

  • Use Webflow for the content.
  • Keep slides lightweight (mostly visuals).
  • Ensure that everything remains in the correct order without hardcoding.
  • Build reusable sync groups for multiple sliders on a single page, giving you the power to customise your design.

#Step 1: It's as simple as adding data-for-index attributes

Each content block in Webflow should have a unique index that matches its corresponding slide.

Example:

<!-- Webflow content blocks -->
<div class="glass-box-services" data-sync-group="services" data-for-index="0">
  Service 1 content
</div>
<div class="glass-box-services" data-sync-group="services" data-for-index="1">
  Service 2 content
</div>
<div class="glass-box-services" data-sync-group="services" data-for-index="2">
  Service 3 content
</div>

Rest assured, inside your Swiper Studio slider, you'll also have slides in order (0, 1, 2, ...).

#Step 2: Add a data-sync-group

This allows you to scope multiple sets of synced sliders + content blocks on the same page.

<!-- Example: Swiper slide markup -->
<div class="swiper-slide" data-sync-group="services" data-for-index="0">
  Slide 1
</div>
<div class="swiper-slide" data-sync-group="services" data-for-index="1">
  Slide 2
</div>
<div class="swiper-slide" data-sync-group="services" data-for-index="2">
  Slide 3
</div>

#Step 3: Add the Sync Script

Drop this in your Before </body> in Webflow:

document.addEventListener('DOMContentLoaded', () => {
  const syncGroups = {};


  // Collect all elements with data-sync-group
  document.querySelectorAll('[data-sync-group]').forEach((el) => {
    const group = el.dataset.syncGroup;
    if (!syncGroups[group]) syncGroups[group] = { slides: [], panels: [] };


    if (el.classList.contains('swiper-slide')) {
      syncGroups[group].slides.push(el);
    } else {
      syncGroups[group].panels.push(el);
    }
  });


  // For each group, sync Swiper with its content panels
  Object.keys(syncGroups).forEach((group) => {
    const { slides, panels } = syncGroups[group];


    // Find Swiper instance
    const swiperContainer = slides[0]?.closest('.swiper');
    if (!swiperContainer) return;
    const swiper = swiperContainer.swiper;


    // On slide change → show the matching panel
    swiper.on('slideChange', () => {
      const activeIndex = swiper.activeIndex;
      panels.forEach((p) => {
        const idx = parseInt(p.dataset.forIndex, 10);
        p.classList.toggle('is-active', idx === activeIndex);
      });
    });


    // On panel click → jump to matching slide
    panels.forEach((panel) => {
      panel.addEventListener('click', () => {
        const idx = parseInt(panel.dataset.forIndex, 10);
        swiper.slideTo(idx);
      });
    });
  });
});

#Step 4: Style the Active State

In Webflow, add a class like .is-active to highlight the synced panel. (change the class name to match your content blocks)

Example:

.glass-box-services.is-active {
  opacity: 1;
  transform: scale(1.05);
  transition: all 0.3s ease;
}
.glass-box-services {
  opacity: 0.5;
}

#How This Works

  • Each slide and content block shares the same data for the index.
  • Both are grouped with data-sync-group="services".
  • When Swiper changes slides, the script finds the matching content block - and activates it.
  • Clicking on a content block also tells Swiper to go to the corresponding slide.

#Advanced Tips

  • Use multiple groups (data-sync-group="team", data-sync-group="projects") on the same page.
  • Drive slides from CMS Collection Lists - just ensure the indexes are generated in order.
  • Extend the script with hash navigation (#services-2) for deep linking.

Done right, Swiper Studio lets you design story-driven, on-site presentations that feel immersive and effortless to update. Build the visuals in Studio, keep content structured in Webflow, and sprinkle in the snippets above to make it feel purpose-built.

If you want a polished, conversion-focused implementation, 3SIX5 Digital can help architect the content model, visuals, and performance profile so the slider looks stunning and loads fast.

Work with 3SIX5 Digital - let's turn your slider into a high-impact presentation component that actually sells.