CMS Slider with Nested CMS Dots

Attributes
,
1

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.

2

Hello @kaleb! That is correct. 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
Screenshot 2025-03-14 at 15.21.062632×976 192 KB

And trigger the init of the scripts with

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

Thanks, @Support-Luis! Glad I was on the right track; unfortunately, my scripting experience is extremely limited.

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

And trigger the init of the scripts with…

Any chance you can help me with these too? 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>

@Support-Luis can you help me with this?