<div class="splide-container">
  <section class="splide" aria-label="cat slide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1229&q=80">
        </li>
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1533738363-b7f9aef128ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80">
        </li>
      </ul>
    </div>
  </section>

  <section class="splide" aria-label="cat slide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1229&q=80">
        </li>
      </ul>
    </div>
  </section>
</div>

* {
  box-sizing: border-box;
}

.splide {
  width: 500px;
  max-width: 100%;
  margin-inline: auto;
  & + & {
    margin-top: 50px;
  }
}

.splide__slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

document.addEventListener("DOMContentLoaded", function () {
  const elms = document.querySelectorAll(".splide");
  let slideLength;
  let options = {
    type: "loop",
    perPage: 1,
    pagination: false
  };
  let addOptions = {};

  for (var i = 0; i < elms.length; i++) {
    slideLength = elms[i].querySelectorAll(".splide__slide").length; //スライドの枚数を取得
    addOptions = {
      arrows: slideLength === 1 ? false : true, //arrowsをfalseにしただけだとスライド自体はできてしまうのでdestroyする↓
      destroy: slideLength === 1 ? "completely" : false //destroy:trueはブレイクポイントを監視する場合。completelyは完全に削除する。
    };
    Object.assign(options, addOptions);

    new Splide(elms[i], options).mount();
  }
});