Weblasts

swiper.js(8.1.4)を使ってゆっくり等速で流れる無限ループスライダーを作ってみました

今回紹介するもの

『swiper』を使って作るゆっくり等速で流れる無限ループスライダーを紹介していきますが、まずはデモを見ていただくと分かる通りゆっくり流れていき、操作は受け付けず、プログレスバーを付けています。

無限ループスライダーのデモ

無限ループスライダーのHTML

今回のコンポーネントを作る際にswiperの各ファイルを読み込むのを忘れないようにしていただければHTMLの方は特別な工夫が必要ありません。

プログレスバーが不要な場合は消す程度で後は各々img要素のパスを書き換えるだけでコピペで使えます。

無限ループスライダーのcss

等速で流れる物を作りたいのでcssを使ってイージングの種類をデフォルトの「ease-out」から『linear』に変えます

対象となるセレクタは今回紹介する形だと『.swiper-wrapper』に対してで問題ないと思いますが、他のオプションなどと組み合わせていてうまくいかない場合デベロッパーツールを使って探し出すのがスマートです

swiperの設定

swiperの設定は以下の通りになります

レスポンシブ設定は省略していますが、必要であれば追加してください。
各パラメータやモジュールを紹介しておきます

autoplay

autoplayを0にすることでスライドの切り替えまでの時間をなしにします。

loop

無限にループする仕様にしたいのでloopはtrueにしておきます。

speed

speedを3000にしてスライドの切り替えにかける時間を3秒に設定しています。

このパラメータを大きくするともっとゆっくり流れるようになりますし、小さくすると早く流れるようになります。

slidesPerView

スライダー内に表示するスライドの数を指定しています。

今回の設定だと常時スライドが3枚と半分が表示されるようになっていますが、この数値をスライド内の画像や要素の大きさによって調整してください

centeredSlides

アクティブなスライドがスライダーの中心に来るように設定していますが、プログレスバーと連動させたときにこのパラメータを設定しておくと個人的に良かったので付けています

preventInteractionOnTransition

スライダーの操作を防ぐかどうかのオプションで、クリックなどをすると止まってしまったりするのを防ぐために使っています

pagination

プログレスバーはこの手のコンポーネントだと全部見たかわからなくなるのを防げそうなので付けてみましたが、必要ない場合は省力してください

無限ループスライダーのバグ

ここまでで見た感じ機能していますが、大きくウインドウサイズをリサイズするとバグります。

こんな事するのは同業者だけなんで大きな問題にはならなそうではありますが、メガネクイクイしながら文句を言われてもつまらないと思うので一応気をつけたほうがいいかもしれません

PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました