How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
- Create two sliders inside separate CMS Collection Lists and assign each a unique
fs-cmssliderattribute. - Add required Finsweet attributes (
list,item,prev,next) to each slider’s elements and include the Finsweet CMS Slider script in the page footer.
To manage two different Collection-based sliders on the same Webflow page using Finsweet's CMS Slider, you need to initialize and configure each slider independently with unique attributes.
1. Setup Two Collection Lists and Sliders in Webflow
- Add two separate Collection Lists on your page, each pulling from a different CMS Collection (e.g., "Blog Posts" and "Projects").
- Inside each Collection List, wrap the dynamic items in a native Webflow Slider component.
- Each slider must be uniquely identified by adding a custom
fs-cmssliderattribute with a different value.
Example:
- For the first slider: add attribute
fs-cmsslider=blogslider - For the second slider: add attribute
fs-cmsslider=projectsslider
2. Add Finsweet CMS Slider Script
- Include the CMS Slider script by inserting the following in your page's Before </body> custom code:
<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>
(Note: this is a reference link, but per guidelines, do not paste as raw code in Webflow. Use Webflow’s Embed element or Page Settings → Custom Code.)
3. Apply Required Attributes to Each Slider
Within each Collection List’s slider:
- On the Slider Wrapper, add the unique
fs-cmssliderattribute (as above). - On the Collection List, add
fs-cmsslider-element="list". - On the each Slide, add
fs-cmsslider-element="item"(usually to the Collection Item itself). - Optionally, add
fs-cmsslider-element="prev"andfs-cmsslider-element="next"on your custom or native arrows for each slider.
Each slider instance must have uniquely named fs-cmsslider values to avoid conflicts.
4. Optional: Adjust Settings via JavaScript (Advanced)
If needed, you can initialize sliders with custom settings by modifying the script with helper options using window.fsAttributes.
However, for most standard multi-slider setups, using different attribute names is sufficient without needing custom JS.
Summary
To use Finsweet CMS Slider with two different Webflow sliders from different Collections:
- Create two sliders, each inside its own Collection List.
- Assign unique
fs-cmssliderattributes to each slider (likeblogslider,projectsslider). - Add required Finsweet attributes to the List, Items, and optional nav buttons.
- Paste the CDN script in the page footer to activate the sliders.
Each slider will function independently, dynamically rendering items from its respective CMS collection.