Trouble using Splide’s overflow

How To
1

I’m trying to hide the slider arrows and pagination, and also disable dragging when there aren’t enough slides to scroll. After some research, I learned that Splide’s ‘overflow’ option should handle this. However, I haven’t had any luck getting it to work as expected.

Any guidance would be greatly appreciated!

2

Have you seen this? Nestable Slider: Customization via JavaScript – Bricks Academy

I managed to get the overflow event working with the following approach. The key was to destroy the existing slider instance first, add the event handler, and then remount it:

document.addEventListener('DOMContentLoaded', function(event) {
    setTimeout(function() {
        // Replace 'mrirlq' with your actual Slider element ID (not CSS ID!)
        var mySlider = window.bricksData?.splideInstances['mrirlq'];

        if (mySlider) {
            mySlider.destroy();

            mySlider.on('overflow', function(isOverflow) {
                mySlider.go(0);
                mySlider.options = {
                    arrows: isOverflow,
                    pagination: isOverflow,
                    drag: isOverflow,
                    clones: isOverflow ? undefined : 0,
                };
            });

            mySlider.mount();
        }
    }, 250);
});

I’m not entirely sure if this is the best approach, but it worked for me.