Slider Example

Posted on Jul 09, 2025

by Jimmy

JavaScript

How to add a slider to a page using the swiper.js library

Add this in the scripts() function in functions.php

functions.php

PHP 
        
            wp_register_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
wp_enqueue_style('swiper-css');

wp_register_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js');
wp_enqueue_script('swiper-js');

Create a swiper.js file, add the code below and import it in your main.js file.

swiper.js

JavaScript 
        
            export default function initSwiper() {
    // Guard: if no swiper on page
    if(!document.querySelector(".swiper")) return;
    
    const swiper = new Swiper('.swiper', {
        // Optional parameters
        spaceBetween: 75,
        slidesPerView: 3,

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        
        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },
        
        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
}

main.js

JavaScript 
        
            import initSwiper from './swiper';

window.addEventListener("DOMContentLoaded", () => {
    //Other functions
    initSwiper();
});

HTML Structure

HTML 
        
            <!-- Slider main container -->
<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Check out their documentation to learn more: https://swiperjs.com/get-started

Back to Snippets