How to Implement Splide Slider in Webflow (Step-by-Step)

Webflow’s built-in slider works for the basics, but it’s limited when you need more control, multiple instances, CMS content, or smoother transitions. That’s where Splide.js shines, a lightweight, responsive JavaScript slider that works beautifully with Webflow.

This tutorial will walk you through how to implement Splide in your Webflow project, from structure to script, step by step.

Step 1: Add Splide CDN to Your Webflow Project

Go to your Webflow Project → Page Settings → Inside </head> tag and paste the following:

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

Go to your Webflow Project → Page Settings → Before </body> tag and paste the following:

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

For latest version please check this.

Step 2: Build the HTML Structure in Webflow

Use Webflow’s Designer to recreate this structure with div blocks and custom class names:

<div class="splide">  
<div class="splide__track">    
<div class="splide__list">      
<div class="splide__slide">Slide 1
<div class="splide__slide">Slide 2   
<div class="splide__slide">Slide 3

Step 2.5: Using Splide Core and Adding Custom Arrows

If you want more control over styling and fewer default styles, you can use Splide Core instead of the full version. This gives you all functionality with minimal CSS.

Replace Splide JS with:

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

To use custom navigation arrows, add this structure inside your slider block:

<div class="splide__arrows">  
<button class="splide__arrow splide__arrow--prev">Prev</button>  
<button class="splide__arrow splide__arrow--next">Next</button></div>

You can use custom element for arrows.

You can replace the button tags with custom icons or elements. Just keep the combo classes for functionality.

Step 3: Initialize Splide with JavaScript

Back in the Page Settings, right below the Splide script, paste this to activate it:

<script>
var splide = new Splide( '.splide', {
  perPage: 3,
} );

splide.mount();
</script>

for more options https://splidejs.com/guides/options/

Add Multiple Splide:

<script>
var first = new Splide( '.first', {
  perPage: 3,
} );

first.mount();
</script>
<script>
var second = new Splide( '.second', {
  perPage: 3,
} );

second.mount();
</script>

Final Thoughts

Adding Splide to Webflow gives you a smooth, flexible, and modern slider experience that scales with your project. Once you use it, the native slider feels too basic.

Call to Action

Want me to help you build a Splide-powered slider inside your Webflow site? I do clean setups that founders and designers can maintain easily. Contact Me

FAQs

Can I use Splide for CMS-driven sliders?

Yes. Just add .splide__slide to the CMS item and it works like magic.

Can I run multiple Splide sliders on one Webflow page?

Yes. Use unique class names or IDs and initialize each separately.

Will it slow down my Webflow site?

No. Splide is very lightweight and loads fast.

Do I need to know JavaScript?

Just the basics. This tutorial gives you copy-paste-ready snippets.

Is Splide free?

Yes. Splide is open-source and free to use in personal and commercial projects.