the breakpoints in slider splide js do not work

Question

I am working with the slider plugin Splide JS. And I pass the options like this (full render slider):

let custom_slider = new Splide(".custom_slider");

custom_slider.mount();

if (custom_slider.length === 2) {
    custom_slider.options = {
        perPage: 2,
        breakpoints: {
            550: {
                perPage: 1,
            },
        },
    };
}

All of the above options work, except for the breakpoints. And I really don't understand why this happens.

I'm trying to assign specific options depending on the installed slides count, getting it like this - custom_slider.length.

It's all good, it works, BUT NOT the breakpoint options.

Answer 1

You can try the following code:

let splide_length = document.querySelectorAll('.custom_slider .splide__slide').length;

if ( splide_length === 2 ) {

    let custom_slider = new Splide(".custom_slider", {
            perPage: 2,
            breakpoints: {
                550: {
                    perPage: 1,
                },
            },
        }).mount();

    } else {
    let custom_slider = new Splide(".custom_slider").mount();
}