How can I enable the auto play function in the Splide slider on my Webflow site?

To enable autoplay in the Splide slider on your Webflow site, you need to initialize Splide with the correct options using custom JavaScript. Follow these steps:

1. Add Splide to Your Webflow Project

• Include the Splide Library: Add the following CDN links to the Before section in Page Settings or Custom Code (Project Settings).
• CSS: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Splide/4.0.7/css/splide.min.css">
• JavaScript: <script src="https://cdnjs.cloudflare.com/ajax/libs/Splide/4.0.7/js/splide.min.js"></script>

2. Create the Splide Slider Structure in Webflow

• Add a Webflow Slider (or a Div Block with Custom Structure).
• Assign an ID to the parent Splide container, e.g., mySplide.
• Ensure each slide has the required class for consistency.

3. Initialize Splide with Autoplay in Custom Code

• Place this script inside Before in Page Settings or use an Embed Code Block inside the Webflow canvas.
• Modify autoplay: true and interval: 3000 (for a 3-second delay) as needed.

<script>  document.addEventListener("DOMContentLoaded", function () {    new Splide("#mySplide", {      type: "loop",      autoplay: true,      interval: 3000,      pauseOnHover: true,      pauseOnFocus: false    }).mount();  });</script>

4. Publish and Test the Autoplay Feature

• Publish your Webflow site and check if the Splide slider automatically plays.
• Adjust settings (e.g., speed, pause behavior) as needed.

Summary

To enable autoplay on your Splide slider, include Splide’s CDN links, set up the correct HTML structure, and initialize the slider using custom JavaScript with autoplay: true.