Visit https://splidejs.com/
This document provides instructions for implementing a CMS slider carousel using the Splide.js library. The document includes HTML structure, library and stylesheet links, and configuration options. Additionally, it provides instructions for creating custom arrows and pagination.
Step 1 — Structure
Setup the structure in Webflow
Follow the provided HTML structure, using the classes Splide provides in their docs. For example, if applied to a Webflow collection, it would be:
- section = ‘.splide’
- collection list wrapper = ‘.splide__track’
- collection list = ‘.splide__list’
- collection item = ‘.splide__slide’
<!-- [jonnyrich.com] Splide — html structure -->
<section class="splide" aria-labelledby="carousel-heading">
<h2 id="carousel-heading">Splide Basic HTML Example</h2>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</section>
Copy
Step 2
Link to the core CSS stylesheet inside the <head> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide-core.min.css" integrity="sha256-ZAXImCY06SjVuIrJfWUETkyCctX5aGdL1AVEBX5CxZA=" crossorigin="anonymous">
Copy
Step 3
Add the splide.js library before </body> tag:
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js" integrity="sha256-FZsW7H2V5X9TGinSjjwYJ419Xka27I8XPDmWryGlWtw=" crossorigin="anonymous"></script>
Copy
Step 4
Configure options before </body> tag:
<script>
document.addEventListener("DOMContentLoaded", function () {
var splide = new Splide(".splide", {
type: "slide",
perPage: 3,
rewind: false,
speed: 400,
gap: "1rem",
dragMinThreshold: ({ mouse: number, touch: number } = 40),
flickPower: 500,
flickMaxPages: 1,
updateOnMove: false,
easing: "cubic-bezier(0.25, 1, 0.5, 1)",
breakpoints: {
991: {
perPage: 3
},
767: {
perPage: 2
},
479: {
perPage: 1,
padding: { right: "2rem" }
}
}
});
splide.on("overflow", function (isOverflow) {
// Reset the carousel position
splide.go(0);
splide.options = {
arrows: isOverflow,
pagination: isOverflow,
drag: isOverflow,
clones: isOverflow ? undefined : 0 // Toggle clones
};
});
splide.mount();
});
</script>
Copy