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になっているので何も設定変更は必要ありません。





