CMS Splide.js Slider with Nav Arrows

If you're looking to enhance your Webflow projects with a more robust and flexible slider, Splide.js is the perfect solution. Unlike Webflow's native slider, Splide.js is lightweight, mobile-friendly, and offers a variety of customization options. In this post, we'll explore how to implement a Splide.js slider within Webflow, specifically focusing on a CMS slider solution.

​

Why Choose Splide.js?

​

Splide.js stands out for several reasons:

• Lightweight: Minimal impact on page load times.
• Mobile-Friendly: Ensures a seamless experience across devices.
• Customizable: Offers extensive options for tailoring the slider to your needs.

​

Four Designs and Implementations

​

Splide.js provides four different designs and implementations, making it versatile for various use cases. Whether you need a simple image carousel or a complex CMS-driven slider, Splide.js has you covered.

​

Implementing Splide.js in Webflow

​

To integrate Splide.js with Webflow, you'll need to add custom code to your project. Here's a step-by-step guide:

​

1. Add Splide.js to Your Project:

• Include the Splide.js CSS and JavaScript files in your project settings under the custom code area.

​

1. Create Your CMS Collection:

• Set up a CMS collection in Webflow that will serve as the content source for your slider.

​

1. Design Your Slider:

• Use Webflow's Designer to create the structure of your slider. Ensure you bind the CMS items to the slider elements.

​

1. Add Custom Code:

• Insert the following custom code in the page settings:

​

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
<script>
  document.addEventListener('DOMContentLoaded', function () {
    new Splide('.splide', {
      type       : 'loop',
      perPage    : 3,
      perMove    : 1,
      pagination : true,
      speed      : 600,
      drag       : 'free',
    }).mount();
  });
</script>

​

1. Customize Your Slider:

• Adjust the settings in the custom code to fit your needs. You can change the number of items per page, the number of items moved per slide, enable infinite looping, and more.

​

Conclusion

​

By using Splide.js, you can create a highly customizable and efficient slider for your Webflow projects. This solution not only enhances the visual appeal but also improves the functionality of your website. Give it a try and see the difference!

​

Happy designing!