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-driven sliders on one Webflow page using the Finsweet CMS Slider script, you need to configure each slider separately with unique attributes and lists of filtered CMS items.

1. Create Two CMS Collections and List Wrappers

• Set up two different Collections in Webflow CMS, each containing the content you want in each slider.
• On your page, add two separate CMS Collection Lists, each connected to their corresponding CMS Collection.

2. Assign Unique fs-cms Attributes

• For each slider, add the correct fs-cms attributes:
• Select the parent Collection List element and apply:
  • First slider: fs-cmsslider="slider-1"
  • Second slider: fs-cmsslider="slider-2"
• These unique identifiers help Finsweet know which script instance controls which slider.

3. Structure Each CMS List Correctly

• Make sure each Collection List is structured properly:
• Place your CMS content cards inside a wrapper that will act as the slider container.
• Include a slider track and Nav Arrows if needed.
• Finsweet relies on the native Webflow Slider component, so ensure your CMS List is placed inside a Webflow Slider element with the right fs-cms attributes.

4. Add the Finsweet CMS Slider Script

• Paste Finsweet’s CMS Slider script in your page settings or the Before custom code area:
• Insert the script from: https://cdn.finsweet.com/cmslibrary/3/cmslibrary.js
• You only need to include this script once per page.

5. Initialize Each Slider with Custom Settings

• Implement Finsweet’s CMS Library initialization at the end of the page using the correct fsAttributes:
• Example inline:
  • fs-cmsslider="slider-1" for the first
  • fs-cmsslider="slider-2" for the second
• The script auto-detects each one based on the unique slider keys.

6. Optional: Filter CMS Items for Each Slider

• If one collection feeds multiple sliders, use the CMS Filter function (fs-cmsfilter) to display only relevant items in each slider.
• Combine filters and sliders by nesting attributes like fs-cmscombined if needed.

Summary

To run two Finsweet-powered CMS sliders on the same Webflow page:

• Use two separate CMS Collection Lists, each tied to different collections.
• Assign each slider a unique fs-cmsslider attribute (e.g., "slider-1", "slider-2").
• Place CMS List content inside properly structured Webflow Sliders.
• Add Finsweet's script once and let the system auto-initialize based on your attributes.

This setup lets you run independent, collection-fed sliders side-by-side with full control.