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

To enable autoplay on a Splide slider in your Webflow site, you need to initialize Splide with the appropriate configuration using custom code.

1. Add Splide JS & CSS to Webflow

• Paste the CDN links for Splide’s CSS and JS inside the Page Settings → Before and Before sections.

In Before (Page Settings > Custom Code):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

In Before :

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

2. Build the Splide Structure in Webflow

• Add a div with a class (e.g., splide) and give it a custom ID (e.g., my-splide).

• Within that, build the structure following Splide requirements:

• div.splide

  • div.splide__track
  • ul.splide__list
    • li.splide__slide for each slide

Ensure all class names match Splide’s structure for it to work properly.

3. Add Custom Script to Enable Autoplay

• Go to Page Settings or place an Embed element at the bottom of the page.
• Add this script, customizing the ID if necessary:

<script>  document.addEventListener('DOMContentLoaded', function () {    new Splide('#my-splide', {      type: 'loop',      autoplay: true,      interval: 3000,      pauseOnHover: true,      arrows: true,      pagination: true,    }).mount();  });</script>

• Change #my-splide to match the actual ID you assigned in Webflow.

4. Publish the Site

• Webflow custom code only works on the published site, not in preview.
• Publish your site to test autoplay functionality.

Summary

To enable autoplay in Splide on Webflow, include the Splide JS/CSS CDNs, structure the slider with the correct classes, and initialize the slider using custom code with autoplay: true. Always publish your site to see the changes.