Splide Carousel

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}

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
    };
} );

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);