Marinus Klasen

Marinus Klasen

  • Development
  • Consultancy
  • Developer Resources
  • Blog
  • Contact

March 14, 2024

Swiper setup when using wp-scripts

Marinus Klasen

I haven’t used Swiper in a while, and while setting it up this time, I noticed the slider was not playing automatically. After some investigation it appeared to need some modules, loaded from swiper/modules.

I’m using @wordpress/scripts with the watch command, like below:

wp-scripts start ./assets/src/js/index.js --output-path=./assets/dist/js/

The slider works beautifully with the following snippet:

// import Swiper JS
import Swiper from 'swiper';
import { Navigation, Autoplay } from 'swiper/modules';

Swiper.use([Navigation, Autoplay]);

document.addEventListener('DOMContentLoaded', () => {

    const swiper = new Swiper('.swiper', {
        loop: true,
        autoplay: {
            delay: 2500, 
            disableOnInteraction: false,
        },
        speed: 1000,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

});

About Marinus Klasen

Marinus has been working in software/web development for more than a decade. Since 2020 his attention shifted on sharing knowledge and developing products and tools for sharing knowledge.

Marinus Klasen on Twitter

Looking for a WordPress expert?
Hire top notch developers on Codeable!

Consult an expert

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get in touch

Contact me using the details below

Marinus Klasen

Wilhelmina van Pruisenweg 35, 2595 AN Den Haag

marinus@mklasen.com
twitter.com/marinusklasen
linkedin.com/in/marinusklasen

  • GitHub
  • LinkedIn
  • Twitter

Have you read?

  • Elementor Widget UsageMarch 27, 2025
  • Programmatically showing popups with ElementorMarch 25, 2025
  • The Elementor sanitize_settings errorSeptember 12, 2024
  • Announcing.. Wooping Shop Health!June 13, 2024
  • Swiper setup when using wp-scriptsMarch 14, 2024

Copyright © 2025 ยท Marinus Klasen | Webdesign by Team Rood