Enhance Webflow Sliders with Splide.js

Published on

Sep 30, 2024

Contributors

Omer Hoffman

Web Design Team Lead

Natalia Kovalenko

Web Designer

The default slider in Webflow is a fantastic starting point — it's simple, functional, and does the job well. However, there are times when you want to go beyond the basics and add a bit more flair to your website. This might involve creating a slider with dynamic content from a CMS Collection, adding micro-interactions, or applying unique custom styling to elevate the user experience and maintain a consistent visual identity.

Today, we want to introduce you to Splide.js — an open-source JavaScript library specifically designed for creating sliders and carousels. Splide.js offers a wide range of features that make it an excellent choice for web designers and developers who want more control over their sliders.

‍

Adding Splide.js to Your Webflow Project

Integrating Splide.js into your Webflow project is quick and straightforward. Just follow these simple steps:

Insert the following <link> tag inside the <head> of your page to include the necessary styles for Splide.js:

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

Place the following <script> tag just before the closing </body> tag of your page to include the Splide.js library:

 <!-- Splide.js Slider --><script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>‍var splide = new Splide( '.splide' );splide.mount();

Create the appropriate HTML structure and class names for Splide.js to recognize. This can be as simple as a series of <div> elements with the .splide__slides class, containing your slide content. You can also connect the slider to a CMS Collection for dynamic content.

That's it! Publish your website and test the slider. To explore additional settings and customization options, visit the Splide.js documentation to find what works best for your project.

Customization options on the Splide.js website

Enhancing User Experience with Splide.js

With its extensive customization options for nearly every aspect of the slider—from navigation and pagination styles to transition effects and autoplay settings—Splide.js provides endless possibilities to enhance user experience. Here are a few key features that have the greatest impact:

Draggable Slides

One of the standout features of Splide.js is its draggable slides functionality. Unlike some other sliders, Splide.js automatically allows users to navigate through slides not just with on-screen arrows, but also by dragging slides with their mouse. This intuitive navigation option enhances user satisfaction and accessibility across devices, whether visitors are using a smartphone, tablet, or desktop.

Infinite Loop

The infinite loop feature is particularly beneficial for websites showcasing content that thrives on repeated exposure, such as testimonials or featured articles. By enabling infinite loop, you encourage users to explore more content effortlessly, without needing to backtrack or manually reset the slider. This feature helps to increase engagement and the time visitors spend on your site.

To activate the infinite loop in your Splide.js slider, simply update your script with the following code snippet before the </body> tag:

 var splide = new Splide( '.splide' {type: 'loop'});splide.mount();

Custom Pagination

Custom pagination allows you to tailor the navigation controls to better fit your website’s design and user experience goals. Splide.js provides extensive options for customizing pagination elements, including their style, position, and functionality. You can choose from various pagination types, such as dots, thumbnails, or custom elements, and adjust their appearance to match your site’s branding.

To modify the appearance of default dot pagination, you can use the following CSS:

If you prefer to use numeric pagination instead of dots, you can achieve this with CSS as well:

By using these CSS customizations, you can align the pagination style with your site's design aesthetics, ensuring a cohesive and engaging user experience.

Conclusion

At Polar, we've discovered that integrating Splide.js with Webflow opens up a world of possibilities for enhancing slider functionality and aesthetics. We've had great success using features like draggable slides, infinite loop, and custom pagination to create more engaging and intuitive user experiences.

For those looking to get the most out of Splide.js, we've found numerous helpful video tutorials on YouTube. These resources offer step-by-step guides and creative ideas for implementation and customization.

We encourage you to explore the full range of customization options available with Splide.js. In our projects, we've seen how it can truly elevate a Webflow site, turning sliders into standout features that enhance both functionality and visual impact.