CMS Nest + Swiper

Attributes
1

Hi there,

I am having issues where I am using List Nest for Swiper onto a Collection, it doesn’t convert to slides and not sure why.

Any support here would be appreciate. This is the final step to finishing the project so urgent support is greatly appreciated.

Staging link: Fully Invested Funds
Read-only: Webflow - Portfolia

2

Hey @info2!

You’ll need to update the snippet in Slater to the one below:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'list',
  async ([listInstance]) => {
    console.log('List successfully loaded!');

    const items = listInstance.items.value;

    // Wait for items to finish nesting before initializing Swiper
    await Promise.all(
      items.map(async (item) => {
        try {
          await item.nesting; // ensure nested list is ready
          console.log('Nested successfully for', item.element);
        } catch (error) {
          console.error('Error resolving nesting for item:', error);
        }
      })
    );

    // Initialize all Swipers
    document.querySelectorAll('[data-swiper="fs"]').forEach((swiperEl) => {
      const swiper = new Swiper(swiperEl, {
        slidesPerView: 'auto',
        speed: 600,
        loop: true,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false,
        },
        // Scope navigation/pagination if needed
        // navigation: {
        //   nextEl: swiperEl.querySelector('[swiper-button="next"]'),
        //   prevEl: swiperEl.querySelector('[swiper-button="prev"]'),
        //   disabledClass: 'is-disabled',
        // },
        // pagination: {
        //   el: swiperEl.querySelector('.swiper-pagination'),
        //   clickable: true,
        // },
      });

      console.log('Swiper initialized:', swiper);
    });
  },
]);

Because we’re initializing multiple sliders, it’s important to wait until all items are nested before selecting and initializing the Swiper instances.

Could you test and let me know how it goes?

Note: the pagination config is commented out in the snippet because your pagination element sits outside of the [data-swiper="fs"] wrapper. If you’d like to enable it, make sure to adjust the selector so it correctly targets the external pagination element.