<p id="js-judgement" style="text-align:center"></p>
<div id="js-splide" class="splide js-splide -reduced-motion">
  <p>reducedMotionあり</p>
  <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>
</div>
<div id="js-splide" class="splide js-splide">
  <p>reducedMotionなし</p>
  <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>
</div>

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

.splide__slide {
  height: 200px;
  background-color: #7ba59e;
}

document.addEventListener("DOMContentLoaded", () => {
  const splides = document.querySelectorAll(".js-splide");

  const options = {
    type: "loop",
    width: "80%",
    padding: "20%",
    gap: 10,
    autoplay: true
  };

  const reducedMotion = {
    reducedMotion: {
      speed: 400,
      rewindSpeed: 1000,
      autoplay: true
    }
  };

  splides.forEach((splide) => {
    const isReducedMotion = splide.classList.contains("-reduced-motion");
    const mergedOptions = isReducedMotion
      ? { ...options, ...reducedMotion }
      : options;
    new Splide(splide, mergedOptions).mount();
  });
});

const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
);
const judgement = document.getElementById("js-judgement");

const handleMotionChange = (event) => {
  if (event.matches) {
    judgement.textContent = "prefers-reduced-motion: reduce";
  } else {
    judgement.textContent = "prefers-reduced-motion: no-preference";
  }
};

handleMotionChange(prefersReducedMotion);
prefersReducedMotion.addEventListener("change", handleMotionChange);