<div id="js-splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"></li>
      <li class="splide__slide"></li>
      <li class="splide__slide"></li>
    </ul>
  </div>
  <button type="button" id="js-toggle" class="splide__playpause is-active" aria-label="スライドを一時停止する"></button>
</div>

.splide {
  margin-block: 24px;
  margin-inline: auto;
}

.splide__slide {
  height: 200px;
  background-color: #859fb7;
}

.splide__playpause {
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 1px solid currentcolor;
  border-radius: 50%;
  color: #42617d;
  background-color: white;
  aspect-ratio: 1 / 1;
  margin-block-start: 16px;
  cursor: pointer;

  &::before {
    content: "";
    width: 100%;
    background-color: currentcolor;
    mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M9.5 5L2.5 9L2.5 1L9.5 5Z" fill="black"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40%;
    aspect-ratio: 1 / 1;
  }

  /* 再生中 */
  &.is-active {
    &::before {
      mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M3 1L3 9M7 1L7 9" stroke="black" stroke-width="2" /></svg>');
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const splide = new Splide("#js-splide", {
    type: "loop",
    width: "80%",
    padding: "20%",
    gap: 10,
    pagination: false,
    arrows: false,
    autoScroll: {
      speed: 0.5,
      pauseOnHover: false,
      pauseOnFocus: false
    }
  });

  splide.mount(window.splide.Extensions);

  // トグルをクリックしたら再生状態を変更する
  const toggle = document.getElementById("js-toggle");
  toggle.addEventListener("click", () => {
    // スクロールが停止しているか（停止中ならtrue、再生中ならfalse）
    const isPaused = splide.Components.AutoScroll.isPaused();
    const action = isPaused ? "play" : "pause";
    const label = isPaused ? "スライドを一時停止する" : "スライドを再生する";

    splide.Components.AutoScroll[action]();
    toggle.classList.toggle("is-active");
    toggle.setAttribute("aria-label", label);
  });
});