Multiple same Splide Sliders in multiple different pages (Splide.js)

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.