I have a splide slider that i placed it in two pages, one in home page and one in about page. these are completely same and properly working, but when i add it in third page its totally ruined while others still working properly. here is my code:
HTML:
<div class="splide my-5 d-flex align-content-center" id="clients">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide pt-3 pb-5 me-3">
<a class="qcard clientcard">
<img alt="compony" src="/assets/logo/png.monster-19.png" />
</a>
</li>
<li class="splide__slide pt-3 pb-5 me-3">
<a class="qcard clientcard">
<img alt="compony" src="/assets/logo/pngimg.com - google_PNG19644.png" />
</a>
</li>
<li class="splide__slide pt-3 pb-5 me-3">
<a class="qcard clientcard">
<img alt="compony" src="/assets/logo/SpaceX_logo_black.svg.png" />
</a>
</li>
<li class="splide__slide pt-3 pb-5 me-3">
<a class="qcard clientcard">
<img alt="compony" src="/assets/logo/Star_Wars_Ahsoka_Logo.png" />
</a>
</li>
<li class="splide__slide pt-3 pb-5 me-3">
<a class="qcard clientcard">
<img alt="compony" src="/assets/logo/ubisoft-2-logo-png-transparent.png" />
</a>
</li>
</ul>
</div>
</div>
JS:
$(document).ready(function () {
new Splide("#clients", {
type: "loop",
perPage: 3,
perMove: 1,
rewind: false,
focus: "center",
pagination: false,
autoWidth: true,
breakpoints: {
530: {
perPage: 1,
},
975: {
perPage: 2,
},
1200: {
perPage: 3,
},
},
}).mount();
});
I want use it just like two other pages with no any changes.