Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Add Splide’s CSS and JS CDNs in Webflow’s Page Settings (Before and Before )
  • Build the required Splide HTML structure with matching class names and a unique ID
  • Insert a custom script initializing Splide with autoplay enabled using that ID
  • Publish the site to activate and test the autoplay functionality

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.

Rate this answer

Other Webflow Questions