How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

To manage two different CMS-based sliders on one Webflow page using Finsweet's CMS Slider script, you need to assign unique identifiers to each slider and initialize them separately.

1. Set Up Two Collection Lists in Webflow

• Drag in two Collection Lists onto your Webflow page.
• Connect each one to a different CMS collection (e.g., Blog Posts, Testimonials).
• Ensure each Collection List has the necessary layout to act as a slider (typically inside a Default Webflow Slider element or wrapped in a custom div).

2. Add Custom Attributes with Unique Identifiers

• For each Collection List, add Finsweet attributes with unique fs-cmsslider-element values:

• First Collection List Wrapper: fs-cmsslider-element="list1"

• Second Collection List Wrapper: fs-cmsslider-element="list2"

• Add the following Finsweet attributes to relevant elements:

• For each Slider container, set fs-cmsslider="true"

• For the pagination elements or navigation arrows (if used), also include proper fs-cmsslider-element="pagination1" or "pagination2", etc.

3. Include the Finsweet CMS Slider Script

• From Finsweet's Attribute Script CDN, embed the script once on the page.
• Go to Page Settings > Before tag, and add the Finsweet CDN:
• <script src="https://cdn.finsweet.com/files/fscmslibrary/fscmslibrary.js"></script>

4. Initialize Each Slider Separately

• Below the CDN include, initialize both sliders with their unique selectors using Finsweet's fsCMSslider function.

• Add the following (without <script> tags per the guideline):

• window.fsAttributes = window.fsAttributes || [];

• window.fsAttributes.push([ "cmsslider", (listInstances) => {

  • const [slider1] = listInstances.filter(item => item.wrapper.getAttribute("fs-cmsslider-element") === "list1");
  • const [slider2] = listInstances.filter(item => item.wrapper.getAttribute("fs-cmsslider-element") === "list2");
  • slider1.init();
  • slider2.init();

• }]);

5. Publish and Test

• Publish your Webflow site to the staging or live domain.
• Ensure both sliders are visible and function independently.
• Each slider should only show content from its respective Collection.

Summary

To use Finsweet’s script with two separate CMS sliders, give each Collection List a unique fs-cmsslider-element and initialize them individually using the Finsweet script. Mismatched or duplicate attributes can cause issues, so ensure each slider instance is clearly identified and targeted in your custom script.