Splide JS guide: create advanced sliders with ease in Webflow

Introduction

When it comes to creating sliders in Webflow, most users are quickly confronted with a frustrating reality: the native options for sliders are very limited. Creating advanced sliders in Webflow proves to be a bit of a challenge in itself, especially if the data has to be sourced from the CMS.

Some alternatives exist, such as the creation of sliders using Finsweet attributes, but they are (for the moment) not always fluid and advanced enough to meet the specific needs of your project.

That's where Splide JS comes in. This JavaScript library lets you create much more advanced, customizable sliders with a little custom code.

In this article, we'll introduce you to Splide JS and show you how to integrate it into your Webflow projects to create more personalized sliders, even integrating CMS collections if necessary. Get ready to discover how you can enhance your Webflow sliders with Splide JS. Let's get started!

What is Splide JS?

"Okay, first of all, what's Splide JS?"

Splide JS is a lightweight, flexible JavaScript library designed specifically for the creation of sliders. It's developed with simplicity and performance in mind, so it's a great option for developers looking for versatile, more advanced and customizable solutions.

But why should you consider using it in your Webflow projects? Let's take a look at the key points:

• Ease of use: Even though it requires custom code, Splide JS is designed to be intuitive, even if you're not an expert in JavaScript development. Its simple, well-documented API makes it easy to quickly set up functional sliders.
• Flexible customization: Splide JS is also highly customizable. You can adjust almost every aspect of your slider, from the number of elements displayed to transition speed, transition effects or automatic scrolling.
• Optimized performance: Splide JS is performance-aware. It's lightweight and guarantees a smooth user experience, even on mobile devices.
• Accessibility: The library supports web accessibility, which means your sliders will remain usable for all visitors, including those using screen readers.
• Webflow compatibility: Splide JS can be seamlessly integrated into your Webflow projects with just a little custom code, making it an ideal option for enhancing your existing sliders or creating new ones with greater flexibility.

In the following sections of this article, we explore in detail how to take advantage of Splide JS to create advanced sliders in Webflow. You'll discover how to install, configure and customize it to meet your specific needs.

1. Splide JS configuration

But before we dive into the advanced customization of Splide JS, let's take a look at how to easily integrate it into Webflow. Follow these steps to get started quickly:

Step 1: Splide JS integration

The first step is to integrate the Splide JS library into your Webflow project. To do this, copy and paste the following snippets into the custom code of your page (or site).

• Paste the following code into the head :

<!--- Splide JS styles --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css" integrity="sha512-cSogJ0h5p3lhb//GYQRKsQAiwRku2tKOw/Rgvba47vg0+iOFrQ94iQbmAvRPF5+qkF8+gT7XBct233jFg1cBaQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

• Paste the following code into the footer:

<!--- Splide JS import --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!--- Importer Splide JS Autoscroll--->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

Step 2: HTML structure requirements

For Splide JS to work, you will need to create a very specific HTML structure for your slider in your Webflow project:

<div class="splide">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide">Contenu de la slide 1</div>
      <div class="splide__slide">Contenu de la slide 2</div>
      <div class="splide__slide">Contenu de la slide 3</div>
    </div>
  </div>
</div>

One of the big advantages of Splide JS over Webflow's native sliders is that you can easily create sliders from CMS collections. To do this, add a collection inside a Div Block with a "splide" class and apply the rest of the structure to the elements of the CMS collection:

• Collection List Wrapper = splide__track
• Collection List = splide__list
• Collection Item = splide__slide

Warning: the name of each class contains two "_" symbols in succession.

Step 3: Customize styles

Once the structure is in place, customize the styles of your slider.

If you wish to manage several sliders with Splide JS in your project, add a combo class to the Splide elements for each slider before styling them. This way, the styles applied will be specific to the corresponding slider (and not common to all sliders managed by Splide).

For example, add an "is-team" combo class to all Splide elements in the Team slider:

<div class="splide is-team">
  <div class="splide__track is-team">
    <div class="splide__list is-team">
      <div class="splide__slide is-team">Contenu de la slide 1</div>
      <div class="splide__slide is-team">Contenu de la slide 2</div>
      <div class="splide__slide is-team">Contenu de la slide 3</div>
    </div>
  </div>
</div>

In this example, you can style the Team slider elements specifically (since each has its own combo class), leaving the CSS classes required by Splide blank.

Important: Note that the gap between slides will be managed in the Splide JS parameters (which we'll get to in a minute). No need to customize them in Webflow styles, then.

Step 4: Initializing Splide JS

Finally, once you've integrated Splide JS, created the HTML structure and customized the basic styles, you can initialize your slider. To do this, paste the following JavaScript code into your page's custom footer code:

<script>
// Splide Team

function splideTeam() {
  // Cible le composant grâce à ses classes 
  let splides = $('.splide.is-team'); 
  for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    // Ouvre les paramètres du slider
    new Splide( splides[ i ], {
      // Personnalisez les options souhaitées ici
    }).mount();
  }
}
splideTeam();

</script>

Just remember to adapt the code to the slider you want to create:

• add a comment before the code to specify which slider it is (1),
• change the function name to specify which slider is targeted (2, 3),
• modify the combo class to target the right element (4).

Congratulations! You now have a basic but functional Splide JS slider in your Webflow project. However, this is just the beginning. In the next section, we take a deeper dive into Splide JS's advanced customization and features to create sliders that will truly meet your needs.

Advanced customization of Splide JS

Now that you've done the basic configuration of your Splide JS slider, let's explore the advanced features that will enable you to make it completely personalized.

Once the slider has been initialized, you can customize it by adding the desired options in the parameters of your code (in the following location):

// Ouvre les paramètres du slider
new Splide( splides[ i ], {
  // Personnalisez les options souhaitées ici
}).mount();

Here is an example configuration:

// Ouvre les paramètres du slider
new Splide( splides[ i ], {
  // Personnalisez les options souhaitées ici
  type: 'loop',
  gap: '4rem', 
  autoWidth: true,
  arrows: false,
  pagination: false,
  drag: true
}).mount();

There are over sixty options (you can find them in the documentation here), so let's take a look at the most useful ones:

The "type" option

type: 'slide' // type: 'loop' // type: 'fade'

This option defines the slider type:

• slide' (default): a slider with a classic slide transition,
• loop': a slider with a classic slide transition and a loop effect (once you've reached the last slide, the first ones follow in succession for infinite scrolling),
• fade': a slider with a fade transition.

The "gap" option

gap: '2rem' // gap: '32px'

This option simply defines the space between slides.

The "speed" option

speed: 400

This option simply defines the transition speed between slides (in milliseconds).

The "autoWidth" option

autoWidth: true // autoWidth: false

This option defines how the width of each slide is determined.

• true': slide widths are determined according to the styles applied in Designer.
• false' (default value): slide width is determined according to the "perPage" option (explained below).

The "perPage" option

perPage: 3

This option defines the number of slides to be displayed on screen (the autoWidth option must not be set to 'true' to avoid conflicts).

The "breakpoints" option

breakpoints: {
  991: {
    perPage: 2
  }
}

This option lets you customize other slider options for different screen sizes. In this example, the number of slides per page is reduced to 2 on tablets (991px and below).

The "pagination" option

pagination: true // pagination: false

This option determines whether or not a navigation (indicator points) will be created (default value: 'true'). To find out how to create a custom navigation, watch Timothy Ricks' video on the subject.

The "arrows" option

arrows: true // arrows: false

This option determines whether or not navigation arrows will be created (default value: 'true'). To find out how to create custom arrows, take a look at Timothy Ricks' video on the subject.

The "autoplay" option

autoplay: false // autoplay: true

This option determines whether or not slides will run automatically (default value: 'false').

The "autoScroll" option

This slightly more advanced option requires the import of an additional plug-in. To do this, simply paste the following code into the footer, just after the initial import of Splide :

<!--- Splide JS autoscroll --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

This option allows the slider to scroll automatically and infinitely. This feature can be very useful for a logo slider, for example.

autoScroll: {
  speed: 2
},

If used, you'll also need to mount the extension just after all options have been set. To do this, locate the following line at the end of your code:

}).mount();

Replace this line with the code below:

}).mount( window.splide.Extensions );

Example of final custom code

For reference, here's what the final footer code should look like:

<!--- Splide JS script --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!--- Splide JS autoscroll --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<script>
// Splide : Team

function splideTeam() { 
  // Cible le composant grâce à ses classes 
  let splides = $('.splide.is-team'); 
  for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    // Ouvre les paramètres du slider
    new Splide( splides[ i ], {
      // Personnalisez les options souhaitées ici
      type: 'loop',
      gap: '1rem', 
      autoWidth: true,
      arrows: false,
      pagination: false,
      drag: true,
      autoScroll: {
        speed: 2
      }
    }).mount( window.splide.Extensions );
  }
}
splideTeam();

</script>

Conclusion

Congratulations! You've now explored the intricacies of Splide JS and discovered how this lightweight library can make your Webflow sliders more powerful and customizable. Before we close this escapade into the world of web development, let's have a quick recap.

But we've only explored part of what Splide JS can do. Dig into the documentation, experiment and customize your sliders so that it fits into every nook and cranny of your Webflow projects!

To find out more, have a look at the following articles:

• How to create an infinite marquee of logos in Webflow
• 7 useful CSS custom codes to enhance your Webflow projects
• Webflow Localization: the ultimate guide to translating and localizing your Webflow site