Splide Carousel Block

FAQ

Are there additional options I can use?

Yes, under the Splide Carousel block Advanced Settings, you can provide a valid JSON string containing additional options located here.

e.g.: {"focus":"center","trimSpace":false}

Can I set default carousel options globally?

Yes, we need to listen to a JavaScript event that is fired when the carousel is ready, and then add the defaults.

document.addEventListener( 'splideReady', function( e ) {
    e.detail.defaults = {
        arrowPath: 'M30.2 19.4L11 .2c-.3-.3-.9-.3-1.2 0-.3.3-.3.8 0 1.2L28.4 20 9.8 38.6c-.3.3-.3.9 0 1.2.3.3.9.3 1.2 0l19.2-19.2c.3-.3.3-.9 0-1.2z',
        perPage: 3
    };
} );

Can I control the carousel using JavaScript / API?

Yes, each carousel is given a unique ID by default, or you can provide your own using the HTML Anchor field under the block Advanced Settings.

Each block exposes a global variable that follows this convention: {ID}Carousel. For example, if your carousel ID is testimonials, the global variable will be testimonialsCarousel.

Using this global variable, you can control the carousel programatically using the Splide API.

Example to navigate to the third slide:

testimonialsCarousel.Components.Controller.go(2);