swiper.js（8.1.4）を使ってゆっくり等速で流れる無限ループスライダーを作ってみました
以前「slick」を使って作った回転寿司のレーンのようにゆっくり等速で流れる無限ループスライダーを『swiper』を使って実装してみたので作り方を紹介します。
slickバージョンやswiperの使い方は以下のリンクを御覧ください
この記事の目次
今回紹介するもの
『swiper』を使って作るゆっくり等速で流れる無限ループスライダーを紹介していきますが、まずはデモを見ていただくと分かる通りゆっくり流れていき、操作は受け付けず、プログレスバーを付けています。
無限ループスライダーのHTML
今回のコンポーネントを作る際にswiperの各ファイルを読み込むのを忘れないようにしていただければHTMLの方は特別な工夫が必要ありません。
プログレスバーが不要な場合は消す程度で後は各々img要素のパスを書き換えるだけでコピペで使えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/img0.png" alt=""></div> <div class="swiper-slide"><img src="img/img1.png" alt=""></div> <div class="swiper-slide"><img src="img/img2.png" alt=""></div> <div class="swiper-slide"><img src="img/img3.png" alt=""></div> <div class="swiper-slide"><img src="img/img4.png" alt=""></div> <div class="swiper-slide"><img src="img/img5.png" alt=""></div> <div class="swiper-slide"><img src="img/img6.png" alt=""></div> <div class="swiper-slide"><img src="img/img7.png" alt=""></div> <div class="swiper-slide"><img src="img/img8.png" alt=""></div> <div class="swiper-slide"><img src="img/img9.png" alt=""></div> </div> <!--↓↓↓プログレスバー用の要素↓↓↓--> <div class="swiper-pagination"></div> </div> |
無限ループスライダーのcss
等速で流れる物を作りたいのでcssを使ってイージングの種類をデフォルトの「ease-out」から『linear』に変えます
対象となるセレクタは今回紹介する形だと『.swiper-wrapper』に対してで問題ないと思いますが、他のオプションなどと組み合わせていてうまくいかない場合デベロッパーツールを使って探し出すのがスマートです
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.swiper{ width: 100%; position: relative; overflow: hidden; } .swiper-wrapper{ transition-timing-function: linear; } .swiper-slide { display: flex; align-items: center; justify-content: center; padding: 50px 0; background-color: #fcf8df; } .swiper-slide img{ display: block; width: auto; height: 100px; } /*↓↓↓プログレスバー用のスタイル↓↓↓*/ .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ transition-timing-function: linear; background-color: #333; } .swiper-pagination-progressbar{ position: relative; } |
swiperの設定
swiperの設定は以下の通りになります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var swiper = new Swiper('.swiper', { autoplay: { delay: 0, }, loop: true, speed: 3000, slidesPerView: 3.5, centeredSlides: true, preventInteractionOnTransition: true, pagination: { el: '.swiper-pagination', type: 'progressbar', } }); |
レスポンシブ設定は省略していますが、必要であれば追加してください。
各パラメータやモジュールを紹介しておきます
autoplay
autoplayを0にすることでスライドの切り替えまでの時間をなしにします。
loop
無限にループする仕様にしたいのでloopはtrueにしておきます。
speed
speedを3000にしてスライドの切り替えにかける時間を3秒に設定しています。
このパラメータを大きくするともっとゆっくり流れるようになりますし、小さくすると早く流れるようになります。
slidesPerView
スライダー内に表示するスライドの数を指定しています。
今回の設定だと常時スライドが3枚と半分が表示されるようになっていますが、この数値をスライド内の画像や要素の大きさによって調整してください
centeredSlides
アクティブなスライドがスライダーの中心に来るように設定していますが、プログレスバーと連動させたときにこのパラメータを設定しておくと個人的に良かったので付けています
preventInteractionOnTransition
スライダーの操作を防ぐかどうかのオプションで、クリックなどをすると止まってしまったりするのを防ぐために使っています
pagination
プログレスバーはこの手のコンポーネントだと全部見たかわからなくなるのを防げそうなので付けてみましたが、必要ない場合は省力してください
無限ループスライダーのバグ
ここまでで見た感じ機能していますが、大きくウインドウサイズをリサイズするとバグります。
こんな事するのは同業者だけなんで大きな問題にはならなそうではありますが、メガネクイクイしながら文句を言われてもつまらないと思うので一応気をつけたほうがいいかもしれません
