I’m trying to add splide.js to my site. I’ve initialised the splide.js like this:
//initiate splide.js
function initiateSplideElements() {
var elms =
document.getElementsByClassName("plans-container");
for (var i = 0; i < elms.length; i++) {
new Splide(elms[i], {
perMove: 1,
gap: "1.5rem",
mediaQuery: "min",
destroy: false,
perPage: 1,
breakpoints: {
960: {
perPage: 2,
},
1201: {
perPage: 3,
},
},
}).mount();
new Splide(".column-carousel", {
type: "loop",
perMove: 1,
gap: "1rem",
mediaQuery: "min",
destroy: false,
perPage: 1,
breakpoints: {
960: {
perPage: 2,
},
1201: {
perPage: 3,
},
},
}).mount();
}
}
window.addEventListener("DOMContentLoaded", () => {
initiateSplideElements();
});
Although, the gaps are being applied, the arrows or breakpoints aren’t working. While resizing the page, for a moment the arrows become visible and then it vanishes again. Please click the ‘test plan popup’ at the bottom of this page to view the problem: buggy page
I had initialised the splide.js with the same options and content in this page and it is working (please scroll down and click the ‘test plan popup’ button).
I cannot figure out why the same splide is working in one page and not working in another. Please help.