How can I enable the auto play function in the Splide slider on my Webflow site?
TL;DR
- Open Webflow Project Settings and add Splide.js CDN links in the Head section under Custom Code.
- Design your slider, embed an initialization script with the autoplay option, publish and test the slider.
To enable the auto play function in the Splide slider on your Webflow site, follow these steps:
1. Access Webflow Project Settings
- Open your Webflow dashboard and select the project where you want to implement the Splide slider.
2. Add Splide.js to Your Project
- Go to the Project Settings, and navigate to the Custom Code tab.
- In the Head section, add the following Splide.js CDN links to include the necessary CSS and JS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css"><script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
3. Create and Design Your Splide Slider
- Go back to Designer mode and construct your slider using Div blocks, Collections, or Images.
- Ensure it visually aligns with how you want your slider to appear.
4. Initialize Splide with Auto Play
- Add an Embed element to your page where you want the slider.
- Include the initialization script for Splide with the autoplay option enabled:
- ```javascript
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '.splide', {
type : 'loop',
autoplay: true,
} ).mount();
} );
</script>
```
- Adjust the
.splideselector as necessary to match your specific slider structure.
5. Publish and Test Your Site
- Publish your project to see the changes live.
- Test the slider to ensure the autoplay function is working correctly.
Summary
To enable autoplay on a Splide slider in Webflow, add the Splide.js CDN links to your project, set up your slider, and initialize it with the autoplay option set to true in a custom script. Make sure to test it to confirm it functions as expected.
