Access Bricks' nestable slider's Splide API

How To
1

I’d like to access some of Brick’s nestable slider’s Splide option via the Splide API.

Specifically:

  • slide change events
  • get the slide index
  • trigger specific slides using an index number

Is there some JS I can use for this?

2

Ok, I think I may have found what I’m looking for. This comment by Thomas points me in the right direction:

Bricks actually provides all swiper & splide instances on the frontend out-of-the-box via “bricksData.swiperInstances” & “bricksData.splideInstances” !

So if want to programmatically go to splide index 1, and your element ID is “qkfwyn” then you’d run:

bricksData.splideInstances.qkfwyn.go(1)

Element ID here is actually data-script-id=“qkfwyn”, not the CSS ID, so I had to dig into the code via the inspector to obtain that.

Example code to achieve various things:

jQuery(document).ready(function($) {
    // Access the Splide instance by its ID
    var splideInstance = bricksData.splideInstances.qkfwyn;

    // Event listener for slide changes
    splideInstance.on('move', function(newIndex) {
        console.log('Current slide index:', newIndex);
    });

    // Function to go to a specific slide
    function goToSlide(index) {
        splideInstance.go(index);
    }

    // Example usage: go to the third slide
    goToSlide(2); // Index starts at 0, so index 2 is the third slide
});
2 Likes
3

I use a nestable Slider on my Page. But bricksData.swiperInstances is empty.

bricksData.splideInstances = []
bricksData.swiperInstances = []

But the Slider is working correctly. Do I have to activate access to the slider somewhere?

4

@Simbasounds You saved my day, it’s working perfectly. Many thanks for saving my time!

1 Like