How can I have two slides work concurrently on the same page in Webflow using Splidejs without encountering any malfunctions or issues?
TL;DR
- Add two separate Splide wrappers with unique IDs inside Webflow.
- Include Splide.js CSS in the header and JS in the footer via CDN links.
- Initialize each Splide instance separately using unique ID selectors in custom footer scripts.
- Ensure no overlapping IDs or conflicting global classes between sliders.
- Test in the browser console to verify both sliders initialize without JavaScript errors.
To run two Splide.js slides concurrently on the same Webflow page without malfunctions, you need to ensure each slider instance is properly initialized with a unique target and avoids conflicts in IDs or class selectors.
1. Add Separate Splide Containers
- Create two different Splide wrapper divs in your Webflow Designer (e.g., Splide 1 and Splide 2).
- Assign each wrapper a unique ID (e.g.,
splide-1,splide-2) using the Element Settings Panel (the gear icon). - Inside each wrapper, structure your splide slides (track, list, and slides) following the Splide.js structure.
2. Include Splide.js in the Page
- Include the Splide.js CSS and JS libraries if not already added.
- In Page Settings → Before </body> tag, insert the Splide script reference from the CDN:
- CSS (add to Page Header):
https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css - JS:
https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js
3. Initialize Each Splide Separately
- Go to Page Settings → Before </body> tag, and add custom script to initialize each Splide using their unique IDs:
- Example:
new Splide('#splide-1', { type: 'loop', perPage: 1 }).mount();new Splide('#splide-2', { type: 'loop', perPage: 3 }).mount();
4. Avoid Class Conflicts
- Make sure the inner elements (like
splide__track,splide__list, andsplide__slide) are correctly nested within their respective wrappers and don’t share overlapping global classes. - Don't duplicate elements with the same
id—each slide must be self-contained and uniquely identified by ID.
5. Test for JavaScript Conflicts
- Use your browser’s developer console (F12 > Console) to look for errors after loading the page.
- Ensure both sliders mount without throwing references or undefined errors.
Summary
To run two Splide.js sliders concurrently in Webflow, assign unique IDs to each slider wrapper, structure each one independently, and initialize them separately via custom script using distinct selector targets. Avoid global class or ID conflicts, and confirm both mount without errors.
