To use the Finsweet script to manage two different sliders on your Webflow page, each feeding content from different collections, you'll need to follow these steps:
1. Install the Finsweet script: First, you'll need to install the Finsweet script on your Webflow site. Go to finsweet.com and follow their instructions to get the script for your site.
2. Set up your collections: In Webflow, create two different collections for the content you want to display in each slider. For example, let's say you have a "Featured Products" collection and a "Latest News" collection.
3. Design your sliders: Create two different slider components in Webflow using the Slider element or any custom slider component. Design each slider to your liking, customized for the specific content you want to display. Make sure to give each slider a unique ID.
4. Configure the Finsweet script: Open the Finsweet script file you installed on your site. Within the script, you'll find a section where you can define your sliders. In this section, you'll specify the unique ID for each slider and the collection it should feed content from. For example:
```javascript
sliders: [
{
sliderId: 'slider1',
collectionType: 'featured-products'
},
{
sliderId: 'slider2',
collectionType: 'latest-news'
}
]
```
Replace `'slider1'` and `'slider2'` with the actual IDs of your sliders, and `'featured-products'` and `'latest-news'` with the slugs or names of your collections.
5. Connect the Finsweet script to your sliders: In your Webflow project, go to the page where you have your sliders and open the page settings. In the custom code section, add a `