Splide.jsを使用したスライダーの一時停止方法


  1. スライダーの自動再生を一時停止する: Splide.jsには、自動再生を制御するオプションがあります。以下のコードは、自動再生を一時停止する方法を示しています。
var splide = new Splide('#slider', {
  autoplay: true,
});
// スライダーの一時停止
splide.pause();
  1. ボタンをクリックしてスライダーを一時停止する: ユーザーがボタンをクリックすると、スライダーの再生を一時停止することもできます。以下のコードは、ボタンをクリックしてスライダーを一時停止する方法を示しています。
<button id="pauseButton">一時停止</button>
<script>
var splide = new Splide('#slider', {
  autoplay: true,
});
var pauseButton = document.getElementById('pauseButton');
pauseButton.addEventListener('click', function() {
  splide.pause();
});
</script>
  1. 特定のイベントでスライダーを一時停止する: 特定のイベントが発生した場合にスライダーを一時停止することもできます。以下のコードは、マウスがスライダーの上にある間、スライダーを一時停止する方法を示しています。
var splide = new Splide('#slider', {
  autoplay: true,
});
splide.on('mouseover', function() {
  splide.pause();
});
splide.on('mouseout', function() {
  splide.play();
});

これらは、Splide.jsを使用してスライダーを一時停止するいくつかの方法の例です。必要に応じて、これらのコードをカスタマイズして使用することができます。