CMS Slider with Nested CMS Dots, Finsweet + Attributes

Design help Custom code
1

I’ve posted this in the Finsweet forums to but haven’t received enough help to get it working…

I’m trying to create a CMS-powered product view that pulls an Image Gallery into a slider with thumbnails as the preview. So I have a CMS collection of the Products, then a nested CMS Slider with CMS Dots—my issue is that the first product in the CMS list gets populated with all the CMS Slider elements and dots rather than each one populating with their content.

I assume this is and ID issue, and I need to have a dynamic ID for each item, but I’m not sure how to go about that. The Attributes Automated Support Service tells me the “list” and “slider” element are duplicated, surely caused by the CMS nesting, just not sure how to dynamically override it.

My desired example is this page here (product, slider thumbnails on hover, etc.): Nike Shoes

Note:
I’m using Foxy.io as my e-commerce backend, so everything is developed as a CMS collection instead of Webflow native e-commerce. There may be other CMS workarounds, but I haven’t thought of any yet.

Site URL

Expected Behavior

I expected each CMS item in the main collection to get a CMS Powered slider and Thumbnails/dots via each nested CMS item.

Actual Behavior

All nested CMS items are displaying in the first CMS Slider and Dots. CMS Slider with Nested CMS Dots

CMS Slider with Nested CMS Dots

I’m trying to create a CMS powered product view that pulls an Image Gallery into a slider with thumbnails as the preview. So I have a CMS collection of the Products, then a nested CMS Slider with CMS Dots—my issue is that the first product in the CMS list gets populated with all the CMS Slider elements and dots rather than each one populating with their content.

I assume this is and ID issue, and I need to have a dynamic ID for each item, but I’m not sure how to go about that. The Attributes Automated Support Service tells me the “list” and “slider” element are duplicated, surely caused by the CMS nesting, just not sure how to dynamically override it.

My desired example is this page here (product, slider thumbnails on hover, etc.): Nike Shoes

Note:
I’m using Foxy. io as my e-commerce backend, so everything is developed as a CMS collection instead of Webflow native e-commerce. There may be other CMS workarounds, but I haven’t thought of any yet.

Site URL

Expected Behavior

I expected each CMS item in the main collection to get a CMS Powered slider and Thumbnails/dots via each nested CMS item.

Actual Behavior

All nested CMS items are displaying in the first CMS Slider and Dots.

———————————————
This is the help I’ve received so far:

What you’ll need to do is prevent the load of the CMS Slider and Custom Slider Dots scripts with the following scripts

<!-- [Attributes by Finsweet] CMS Slider -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"
></script>
<!-- [Attributes by Finsweet] Custom slider dots -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-sliderdots@1/sliderdots.js"
></script>

You can then add a small script that iterates through all the items and sets the multiple instance attributes like in the capture below.

Screenshot 2025-03-14 at 15.21.06

And trigger the init of the scripts with

window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.cmslider.init();
window.fsAttributes.sliderdots.init();

———————————————————————

And have tried this:

I cringingly prompted some AI, but haven’t got it working, nor can I troubleshoot. Here’s what it’s given me so far:

Header

<!-- Prevent default loading of Finsweet CMS Slider and Custom Slider Dots -->
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"
></script>
<script
  defer
  fs-attributes-preventload="true"
  src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-sliderdots@1/sliderdots.js"
></script>

Body

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const cmsItems = document.querySelectorAll("[fs-cmsslider-element='list']");

    cmsItems.forEach((item, index) => {
      const uniqueId = index + 1; // Unique instance number starting from 1
      
      // Assign unique attributes for each slider and dots
      item.setAttribute("fs-cmsslider-element", `list-${uniqueId}`);

      const slider = item.querySelector("[fs-cmsslider-element='slider']");
      if (slider) {
        slider.setAttribute("fs-cmsslider-element", `slider-${uniqueId}`);
      }

      const dots = item.querySelectorAll("[fs-sliderdots-element='dots']");
      dots.forEach((dot) => {
        dot.setAttribute("fs-sliderdots-element", `dots-${uniqueId}`);
      });
    });

    // Initialize Finsweet CMS Slider and Slider Dots after setting attributes
    window.fsAttributes = window.fsAttributes || [];
    window.fsAttributes.push([
      "cmslider",
      (cmslider) => cmslider.init()
    ]);
    window.fsAttributes.push([
      "sliderdots",
      (sliderdots) => sliderdots.init()
    ]);
  });
</script>

Thanks to anyone taking the time to read this mess!

1 Like
2

If you’re using FS CMS Slider, it won’t be able to adapt to your setup involving an arbitrary number of instances per page.

You’re better off using Swiper.js or Splide here, which you’d have full code control over and can create as many instances as you need, dynamically.

3

*Insert my severe lack of coding knowledge here.

Swiper.js looks like it can do what I need, but I have no idea how to bring it into Webflow, connect it to my dynamic connect, or get it to look the part.