当記事ではswiper.jsを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
目次
①矢印とドットのないスライダーを作成する
自動で流れ続けるスライダーなので、矢印とドットはいりません。
loopオプションをtrueにしておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
})
</script>矢印とドットのないスライダーができました。
スワイプでスライドを動かせると思います。
②スライドを自動再生にする
autoplayオプションでスライドを自動再生にします。止まる事なく動かしたいので、delayを0にします。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: { //追記
delay: 0, //追記
}, //追記
})自動再生のスライダーができました。
③スライドスピードと表示枚数を設定する
speedオプションでスライドスピードを、slidesPerViewオプションで表示枚数を設定します。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: {
delay: 0,
},
speed: 3000, //追記
slidesPerView: 3, //追記
})④スライドの動きをスムーズにする
CSSに下記のように追記してスライドの動きをスムーズにします。
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}自動で流れ続ける無限ループスライダーができました！
⑤ホバー時に自動再生を停止する
サイトの閲覧者の中にはもしかしたら、自動再生を止めて特定のスライドに集中したい人もいるかもしれません。
そんな方のために無限ループスライダーをより改善しましょう。
pauseOnMouseEnter:trueを追加することで、ホバー時に自動再生を止められます。
disableOnInteraction:falseを追加する事で、ホバーを外したときに自動再生を再開できます。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: {
delay: 0,
pauseOnMouseEnter: true, // 追記
disableOnInteraction: false, // 追記
},
speed: 3000,
slidesPerView: 3,
})
ホバー時に自動再生が停止し、ホバーが解除されると再開します。
即座に停止するのではなく、スライドの切り替えが終了した時点で停止します。
⑥自動再生の方向を逆向きにする
autoplaオプションの中にreverseDirection: trueを追加することで、自動再生を逆向きにすることができます。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
reverseDirection: true, // 追加
},
speed: 3000,
slidesPerView: 3,
})
自動再生が逆向きになりました。
ループが動かない件について
私たちはWeb開発者の何人かがloopが動かない件について話していることに気が付きました。
原因と解決策を調査して別の記事にまとめたので、ループがうまく動かなかったり途中で止まる場合はこちらをご参照ください。
Swiper9と10でloop×slidesPerViewが動かない件
ソースコード全文
最後にソースコードを全文載せておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
<div class="swiper-slide"><img src="./img/sample4.png"></div>
</div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true,
speed: 2000,
slidesPerView: 3,
autoplay: {
delay: 0,
pauseOnMouseEnter: true, // ホバーした時に自動再生を停止する
disableOnInteraction: false, // ホバー外した時に自動再生を再開する
reverseDirection: true, // 自動再生を逆向きにする
},
})
</script>以上、swiper.jsを使用して自動で流れ続ける無限ループスライダーを作成する方法でした。
