Swiper

自動再生

script
                  
    window.onload = function () {
      const swiper = new Swiper(".swiper", {
        loop: true, //スライドの無限ループ
        slidesPerView: 2, //表示枚数
        spaceBetween: 10,// スライド間に10pxの余白を設定

        autoplay: {// スライドの自動再生
          delay: 3000, // スライド間の遷移の遅延を設定
          disableOnInteraction: false, // ユーザーが操作したときに自動再生を止める止めないようにする
        },
        speed: 1000,  // スライド切り替え速度

        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        breakpoints: {
          // 768px以上では
          769: {
            slidesPerView: 3,
          },
        }
      });

      //リサイズイベントでautoplayを再開する
      window.addEventListener('resize', () => {
        swiper.autoplay.start();
      });

    }
                
              
オプション
                  
autoplay: {// スライドの自動再生
  delay: 3000, // スライド間の遷移の遅延を設定
  disableOnInteraction: false, // ユーザーが操作したときに自動再生を止める止めないようにする
},
speed: 1000, // スライド切り替え速度


autoplay:{
}
・自動再生させるように指定

delay:
・「autoplay」の中に記述する
・次のスライドに切り替わるまでの時間を指定(ミリ秒)
デフォルト:3000,

disableOnInteraction:
・「autoplay」の中に記述する
・ユーザーが操作したときに自動再生を止める止めないようにする
'true'(デフォルト / 自動再生が止まってしまう)
'false'(自動再生を止めないようにする)

speed:
・スライド切り替えのアニメーションのスピードを指定(ミリ秒)
デフォルト:300,


//リサイズイベントでautoplayを再開する
window.addEventListener('resize', () => {
  swiper.autoplay.start();
});
・リサイズすると「autoplay」が止まってしまうので「autoplay.start();」で再開するようにする
※2024年7月現在の最新バージョンのv11.1.5は
 「disableOnInteraction」の設定はデフォルトがfalseになっているので何も設定変更は必要ありません。
                  
                

・「Splide」の自動再生