How can I have two slides work concurrently on the same page in Webflow using Splidejs without encountering any malfunctions or issues?

To run two Splide.js sliders concurrently on the same Webflow page without issues, you need to ensure each slider has a unique ID or class and is independently initialized in JavaScript.

1. Assign Unique Identifiers

• In Webflow, select the first slider element and give it a unique ID (e.g., slider-1).
• Give the second slider a different ID (e.g., slider-2).
• Avoid using the default splide class alone for multiple sliders unless combined with specific IDs to prevent conflicts.

2. Include Splide.js

• Add Splide.js in the Page Settings > Before tag or use a CDN Embed component and place it at the bottom of the page.
• Use the latest version URL from Splide.js CDN (e.g., https://cdn.jsdelivr.net/npm/@splidejs/splide/dist/js/splide.min.js).

3. Initialize Each Splide Separately

• Add this script inside an Embed element or in Page Settings > Before tag:

• Example initialization:

  • new Splide('#slider-1', { type: 'loop', perPage: 1 }).mount();
  • new Splide('#slider-2', { type: 'loop', perPage: 3 }).mount();

• Each call to new Splide() should target a unique ID, and define its own options.

4. Ensure CSS Isolation

• If you're using custom styles, scope CSS rules to each slider using their unique IDs or specific class combinations.
• Avoid global .splide or .splide__slide styles that might impact both sliders.

5. Check for JavaScript Errors

• Open the browser console to catch initialization errors or selector mismatches (e.g., typo in ID, missing element, or Uncaught errors).
• Webflow interactions or animations should not target or overlap both sliders unless intended.

Summary

To run two Splide.js sliders concurrently in Webflow, give each slider a unique ID, initialize them separately with specific options, and avoid shared global styling that may conflict. This ensures both sliders operate independently and reliably within the same page.