スライダーはスライドが切り替わるだけでなく、常に定速で流れ続けるタイプも作る事が出来ます。
今回はSwiperを使って無限ループスライダーを作る方法を解説していきます。
Swiperの基本的な使い方については以下の記事を参照下さい。
【jQuery不要】スライダープラグイン Swiper.jsの使い方
効率よくコーディングしたい人はこちら
Swiperで横方向に流れ続ける無限ループスライダーを作る方法
まずは基本となるスライダーを見てみましょう。
See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.
今回は無限ループスライダーなので、矢印とページネーションは削除します。
コード解説
HTMLは基本と変わらないので、CSSとJavaScriptだけ見てみます。
まずはCSS。
/* スライドの動き等速 */
.swiper-wrapper {
transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide img {
height: auto;
width: 100%;
}CSSのポイントはスライドの動きを等速にする transition-timing-function: linear; ですね。
これがないと等速で流れ続けるというスライダーにはなりません。
続いてJavaScript。
const swiper = new Swiper(".swiper", {
loop: true, // ループ有効
slidesPerView: 3, // 一度に表示する枚数
speed: 6000, // ループの時間
allowTouchMove: false, // スワイプ無効
autoplay: {
delay: 0, // 途切れなくループ
},
});こちらは基本形と全然違うので、1つずつ解説していきます。
JavaScriptコード解説
loop
slidesPerView
speed
allowTouchMove
delay
無限ループスライダーデモ
そしてこちらが無限ループスライダーになります。
See the Pen
Swiper（無限ループ） by junpei (@junpei-sugiyama)
on CodePen.
逆方向に無限ループスライダー
無限ループスライダーはデフォルトでは右から左に流れますが、逆方向にしたい時もあると思います。
逆方向にするのは簡単で、autoplayのオプションに1行追加するだけでOKです。
const swiper = new Swiper(".swiper", {
loop: true, // ループ有効
slidesPerView: 3, // 一度に表示する枚数
speed: 6000, // ループの時間
allowTouchMove: false, // スワイプ無効
autoplay: {
delay: 0, // 途切れなくループ
reverseDirection: true, // 逆方向有効化
},
});最後の reverseDirection: true, ですね。
デフォルトは false となっているので、trueにして逆方向を有効化します。
こちらがデモになります。
See the Pen
Swiper（無限ループ：逆方向） by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
同じくslickの無限ループスライダーも逆方向にすることは出来ますが、Swiperと違いオプションに追加するだけではないので注意が必要ですね。
実務ではデフォルトの方向と逆方向の両方を使う事もあるので、ぜひ実装出来るようになっておきましょう。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約280件（平均スコア） 今だけ！5大特典あり🎁コーディング案件の単価と作業効率を上げる！
