Static to Collection List - bug with swiper.js

Attributes
1

Hi there,

I’m encountering a bug with my slider. I want to integrate a static element into this CMS slider:

The top is static, the bottom is the slider.

image
image1445×1324 118 KB

Integrating the static element works but the slider doesn’t always take into account that a new element got into the collection list and doesn’t update the bullet point down there.

The problem is that this is acting as there’s one less slide, so the last slide is not visible.

image
image1909×837 95.8 KB

yet, sometimes, when refreshing the page, the slide IS taken into account and one more bullet appears in the nav:

image
image456×362 45.9 KB

Clearing the cache and reloading the page usually works. But I cannot have a solution that renders what I want 1/10 times…

Here’s my slider’s code:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
 document.querySelectorAll(".slider_2_wrap").forEach((wrap) => {
 if (wrap.dataset.scriptInitialized) return;
 wrap.dataset.scriptInitialized = "true";

 const cmsWrap = wrap.querySelector(".slider_2_cms_wrap");

 if (!cmsWrap) {
 console.warn("Missing required elements for Swiper in:", wrap);
 return;
 }

 const swiper = new Swiper(cmsWrap, {
 slidesPerView: "auto",
 followFinger: true,
 freeMode: false,
 slideToClickedSlide: false,
 centeredSlides: false,
 autoHeight: false,
 speed: 600,
 mousewheel: {
 forceToAxis: true,
 },
 keyboard: {
 enabled: true,
 onlyInViewport: true,
 },
 // rewind slides when clicking next or prev
 rewind: true,
 // Autoplay slides with a duration
 autoplay: {
	delay: 5000,
 	disableOnInteraction: false,
},
 pagination: {
 el: wrap.querySelector(".slider_2_bullet_wrap"),
 bulletActiveClass: "is-active",
 bulletClass: "slider_2_bullet_item",
 bulletElement: "button",
 clickable: true,
 },
 scrollbar: {
 el: wrap.querySelector(".slider_2_draggable_wrap"),
 draggable: true,
 dragClass: "slider_2_draggable_handle",
 snapOnRelease: true,
 },
 slideActiveClass: "is-active",
 slideDuplicateActiveClass: "is-active",
 });
 });
});
</script>
2

Hi @hello60,

Looking at your slider issue, we can see it’s a timing problem where Swiper initializes before your static element properly integrates into the Collection List, causing incorrect pagination calculations.

The inconsistent behavior (working occasionally or after cache clearing) points to race conditions between DOM manipulation and Swiper initialization.

What I suggest is:iInstead of wrapping the init code with a DOMContentLoaded event listener, you use the Attributes callback function to run code after the List solution has succesfully loaded.

Simply replace the code you shared with the one below.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;
      console.log(listInstance);

      document.querySelectorAll('.slider_2_wrap').forEach((wrap) => {
        if (wrap.dataset.scriptInitialized) return;
        wrap.dataset.scriptInitialized = 'true';

        const cmsWrap = wrap.querySelector('.slider_2_cms_wrap');

        if (!cmsWrap) {
          console.warn('Missing required elements for Swiper in:', wrap);
          return;
        }

        const swiper = new Swiper(cmsWrap, {
          slidesPerView: 'auto',
          followFinger: true,
          freeMode: false,
          slideToClickedSlide: false,
          centeredSlides: false,
          autoHeight: false,
          speed: 600,
          mousewheel: {
            forceToAxis: true,
          },
          keyboard: {
            enabled: true,
            onlyInViewport: true,
          },
          // rewind slides when clicking next or prev
          rewind: true,
          // Autoplay slides with a duration
          autoplay: {
            delay: 5000,
            disableOnInteraction: false,
          },
          pagination: {
            el: wrap.querySelector('.slider_2_bullet_wrap'),
            bulletActiveClass: 'is-active',
            bulletClass: 'slider_2_bullet_item',
            bulletElement: 'button',
            clickable: true,
          },
          scrollbar: {
            el: wrap.querySelector('.slider_2_draggable_wrap'),
            draggable: true,
            dragClass: 'slider_2_draggable_handle',
            snapOnRelease: true,
          },
          slideActiveClass: 'is-active',
          slideDuplicateActiveClass: 'is-active',
        });
      });
    },
  ]);
</script>

Let me know how it goes and if you need any help!

3

Hi @Support-Luis,

Thank you for your clear answer :slight_smile:

I’ve tried the code you provided but it’s not working how we want. The slider is still not integrating that there’s one more slide. I tried clearing the cache but still didn’t help. Only when I resize the window in the inspect view it reloads.

Here’s the read only link: Webflow - inTouch 3.0

Let me know if that helps!

4

Hey @hello60!

I have been investigating the issue, and it appears that having multiple Swiper Sliders on the page is causing the problem.

It seems that the For Care Facilities navigation is actually counting the Blog Articles slides (at the bottom of the page).

The best solution here is to rewrite the init scripts to ensure there is no conflict between slider instances.

Alternatively, you can look into using our Slider Component, which is also built using Swiper, and its integration with Attributes is seamless.

Let me know what works best for you!

5

Thanks @Support-Luis I managed to do it buy simply renaming the classes and it works. Thanks for your help!

1 Like