【デモあり】Swiperでプログレスバーを実装する方法
こんにちは、TANE-beエンジニアです。
今回はスライダーとプログレスバーを実装してみたいと思います。
スライダーにはSwiper.jsを使用します。
まずはデモページをご覧ください。
画像の下で動いている黄色のバーがプログレスバーです。
プログレスバーを実装すると、現在見えていないコンテンツが存在し切り替わることがわかりやすくなります。スライダー内容を見せるために速度を落としたい箇所や、スライダーとわかりにくい箇所に実装すると効果的です。
同じ効果をもつ仕様としては、左右のコンテンツを示すボタンや、ページナビゲーションのドットなどを実装することもありますね。
ボタンやページナビゲーションはデフォルトに機能で実装が可能なことが多いですが、プログレスバーは少し自分でコードを書く必要があります。今回はその実装をご紹介していきます。
簡単に実装できるので、ぜひ試してみてください。
swiperを読み込む
まずSwiper.jsについて簡単にご説明します。
Swiper.jsは、スライダーが実装できるJavaScriptのライブラリです。
jQueryのように他のライブラリを必要としないので、高速で読み込むことができます。オプションも豊富にあり、検索などで実装例が多く出てくるので使いやすいです。
個人的な話ですが、元はSlickをよく使用していたのですが、Swiperを使ってみたらカスタマイズなどがしやすくて最近はもっぱらSwiperを使用しています。
公式ドキュメントはこちら
CDNはこちらから最新のものを利用できます。
今回使用するのはデフォルトのcssとjsのファイルです。特に中身を変更したりしないので、どちらも圧縮済みの.minがついたファイルを読み込んでください。
▼js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js
▼css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.js
▼css
https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.4.1/swiper-bundle.min.css
スライダーの実装
ではまずスライダー部分を実装します。
htmlはこちら。画像を囲っている<div>にSwiperのクラスをつけていきます。
<!-- 全体を囲うクラス .swiper -->
<div class="swiper">
<!-- スライドさせるアイテムを囲うクラス .swiper-wrapper -->
<div class="swiper-wrapper">
<!-- スライドさせるアイテムにつけるクラス .swiper-slide -->
<div class="swiper-slide"><img src="./img/img1.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img2.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img3.jpg" alt=""></div>
<div class="swiper-slide"><img src="./img/img4.jpg" alt=""></div>
</div>
</div>jsはこちら。
自動で動かしたいのでautoplayやloopを設定します。
Swiperはデフォルトの機能が豊富なので、カスタマイズしたい場合はまず公式のパラメータを利用して実装できないか調べてみましょう。disableOnInteractionは、手動でスライダーを動かした時にスライダーが停止するというSwiperのデフォルトの設定を消しています。
var swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
}
});さて、この時点でスライダーは動きましたか？
この時点でスライダーが動いていない場合はコンソールエラーなどを確認しつつ、まずはスライダーが動くようにしましょう。うまくスライダーが動いたら、次はプログレスバーを実装していきます。
プログレスバーの実装
では次にプログレスバーを実装します。
htmlはこちら。背景と中で動く部分を用意して、中の.pregressbar_inというspanをposition:absolute; で背景に合わせて置きます。widthはあらかじめ100%で背景いっぱいにしたものを、今回はtransform: scaleX();の値で動かします。
<div class="progressbar"><span class="progressbar_in"></span></div>.progressbar{
position: relative;
width: 100%;
height: 7px;
margin-top: 10px;
background: #ccc;
border-radius: 7px;
overflow: hidden;
span{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #fbca5a;
border-radius: 7px;
transform: scaleX(0);
transform-origin: left center;
transition-timing-function: linear;
}
}色やサイズ、配置箇所などはそれぞれのデザインに合わせて変更してください。transition-originで左を起点に動くように設定し、transition-timing-functionで動き方を管理しています。
ではjsです。
var bar = document.querySelector('.progressbar_in');
var speed = 5000;
window.onload = function() {
var swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: speed,
disableOnInteraction: false,
},
on: {
slideChangeTransitionStart: function () {
bar.style.transitionDuration = '0s',
bar.style.transform = 'scaleX(0)'
},
slideChangeTransitionEnd: function () {
bar.style.transitionDuration = speed + 'ms',
bar.style.transform = 'scaleX(1)'
},
}
});
}autoplayのdelayの部分を変数で管理するように変更しています。
スライド部分の動くスピードと、バーが動くスピードを合わせて管理するためです。変更したい場合は変数の値1箇所(今回5000が入っている箇所)を変更するだけで対応できます。
slideChangeTransitionStartでスライドが動くたびにリセットし、slideChangeTransitionEndでスライドが切り替わったタイミングで.progressbar_inの要素がscaleX(1)になるという設定になっています。
これでプログレスバーの実装は完了です。
コードまとめ
<div class="swiper">
<div class="swiper-wrapper">
<div class="demo01_slider_item swiper-slide"><img src="./img/img1.jpg" alt=""></div>
<div class="demo01_slider_item swiper-slide"><img src="./img/img2.jpg" alt=""></div>
<div class="demo01_slider_item swiper-slide"><img src="./img/img3.jpg" alt=""></div>
<div class="demo01_slider_item swiper-slide"><img src="./img/img4.jpg" alt=""></div>
</div>
</div>
<div class="progressbar"><span class="progressbar_in"></span></div>.progressbar{
position: relative;
width: 100%;
height: 7px;
margin-top: 10px;
background: #ccc;
border-radius: 7px;
overflow: hidden;
span{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
transform-origin: left center;;
background: #fbca5a;
border-radius: 7px;
transform: scaleX(0);
transition-timing-function: linear;
}
}var bar = document.querySelector('.progressbar_in');
var speed = 5000;
window.onload = function() {
var swiper = new Swiper('.swiper', {
loop: true,
autoplay: {
delay: speed,
disableOnInteraction: false,
},
on: {
slideChangeTransitionStart: function () {
bar.style.transitionDuration = '0s',
bar.style.transform = 'scaleX(0)'
},
slideChangeTransitionEnd: function () {
bar.style.transitionDuration = speed + 'ms',
bar.style.transform = 'scaleX(1)'
},
}
});
}slideChangeTransitionStartといったイベントを利用できるようになれば、スライドに合わせたアニメーションの実装が簡単にできるようになります。
Swiperは色々とカスタマイズしやすいライブラリなので、今後も色々試してみたいと思います！
簡単なのでぜひ試してみてください。
この記事の執筆者
TANE-be Engineer
大阪・京都にあるWebサイト制作の株式会社TANE-beのエンジニアが日々の業務で使っている知識や技術を紹介します。