Continuous & Infinite Logo Slider with Splide

In this tutorial, we will learn how to create a seamless and continuous logo slider using the popular Splide JavaScript library along with its auto-scroll extension. This type of slider is perfect for showcasing client logos or partners on your website in a smooth and endless loop.

To give you a better understanding of how the continuous logo slider functions in a real-world scenario, below is a live example implemented using the configurations and steps outlined in this post:

What You Need

• A modern web browser.
• Basic knowledge of HTML, CSS, and JavaScript.
• Splide and the auto-scroll-extension installed. You can download them from Splide or include them via CDN.

Posts have already been written in the past explaining how to create cool sliders. One using Slick Slider and the other using Vegas Slider. Take a look if you’re interested.

Step 1: Include Splide in Your Project

First, add the Splide CSS and JavaScript files to your project. It is important to load the auto-scroll extension after the main Splide library to ensure it initializes correctly. You can link them directly from a CDN, or if you are using WordPress, you can enqueue them in your theme.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/splide@4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/splide@4/dist/js/splide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/splide-extension-auto-scroll@4"></script>

If you’re integrating Splide into a WordPress site, add the following to your theme’s functions.php file to properly enqueue the scripts and styles:

function enqueue_splide_assets() {
    wp_enqueue_style('splide-css', 'https://cdn.jsdelivr.net/npm/splide@4/dist/css/splide.min.css');
    wp_enqueue_script('splide-js', 'https://cdn.jsdelivr.net/npm/splide@4/dist/js/splide.min.js', array(), false, true);
    wp_enqueue_script('splide-auto-scroll-js', 'https://cdn.jsdelivr.net/npm/splide-extension-auto-scroll@4', array('splide-js'), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_splide_assets');

This ensures that Splide’s CSS and JavaScript are loaded correctly on your WordPress site, making it ready for slider implementation.

Step 2: Add HTML Structure

Create the HTML structure for your slider. Here’s a basic setup:

<div class="splide YOUR_SLIDER_CLASS">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="logo1.png" alt="Logo 1"></li>
      <li class="splide__slide"><img src="logo2.png" alt="Logo 2"></li>
      <!-- Add more logos as needed -->
    </ul>
  </div>
</div>

Step 3: Initialize Splide

Use the following JavaScript to initialize the Splide slider. This script configures the slider for optimal performance and responsiveness:

document.addEventListener('DOMContentLoaded', function () {
    let splide = new Splide('.YOUR_SLIDER_CLASS', {
        perPage: 4,
        type: 'loop',
        pagination: false,
        speed: 860,
        arrows: false,
        lazyLoad: "nearby",
        drag: 'free',
        focus: 'center',
        autoScroll: {
            speed: -0.5,
            pauseOnHover: false,
        },
        mediaQuery: 'min',
        breakpoints: {
            1123: {
                perPage: 6,
                autoScroll: {
                    speed: 0.5,
                },
            },
        }
    });

    splide.on('ready', function () {
        document.querySelector('.YOUR_SLIDER_CLASS').classList.add('is-active');
    });

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

This script adds dynamic behavior such as lazy loading, free drag, and different configurations for varying screen sizes. It also ensures that the is-active class is added only after the slider has initialized, providing a smoother visual start.

Ensure you set the initial opacity of your slider to zero to allow for a smooth transition when the slider becomes active.

Using WordPress?

If integrating Splide into a WordPress site, it’s good practice to place your initialization script in a separate JavaScript file and enqueue it similarly to how you included the library. This ensures your scripts load in the correct order.

Add this to your theme’s functions.php:

function enqueue_splide_init_script() {
    wp_enqueue_script('splide-init-js', get_template_directory_uri() . '/js/splide-init.js', array('splide-js'), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_splide_init_script');

In your splide-init.js file, place the JavaScript used to initialize Splide. This separation keeps your custom scripts organized and maintains cleaner code.

More Configuration Options

For a complete list of all configuration options available in Splide, visit the Splide Documentation – Options page. This resource is invaluable for customizing the slider to fit the specific needs and responsiveness of your website.

Conclusion

That’s it! You now have a continuous logo slider on your website that will keep cycling through logos indefinitely. This setup is perfect for a professional and dynamic display of your business partnerships or client logos. Adjust the settings as necessary to customize the slider to your website’s design and performance needs.