)
To enable autoplay on a Splide slider in your Webflow site, you need to initialize Splide with the appropriate configuration using custom code.
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>
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 slideEnsure all class names match Splide’s structure for it to work properly.
<script> document.addEventListener('DOMContentLoaded', function () { new Splide('#my-splide', { type: 'loop', autoplay: true, interval: 3000, pauseOnHover: true, arrows: true, pagination: true, }).mount(); });</script>
#my-splide
to match the actual ID you assigned in Webflow.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.