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