Web制作においてスライダーは頻出の機能で、私はよくswiperを使います。
今年使ったカスタマイズについて備忘録的に記録を残したいと思ったので、記事にしました。
では早速行きましょう！
サムネ付きスライダーでメインスワイプ時にサムネも動かしたい
タイトルから意味が理解しにくいですが。。
一つ目はサムネ付きスライダーについてです。
下のようなサムネ付きスライダーは良くあるかと思います。
See the Pen Untitled by un-T Nakagawa (@n-yuttie) on CodePen.
ネクストボタンやメイン画像をスワイプしてもらうと分かると思うのですが、サムネはアクティブなものが切り替わるだけでサムネスライドの位置自体は変わらないです。
ちなみにこちらのカスタマイズは、メインの方のswiperJS内に、
thumbs: {
swiper: サムネのswiper関数名,
}
と記載します。
メイン画像の切り替えと同時にサムネの位置も変えたいというのがこのカスタマイズです。
See the Pen Untitled by un-T Nakagawa (@n-yuttie) on CodePen.
こちらのスライダーはネクストボタン、メイン画像のスワイプをするとサムネの位置も変わると思います。
これ自体は簡単で、先程と同様にメインスライドのswiperJS内に、
thumbs: {
swiper: サムネのswiper関数名,
},
controller: {
control: サムネのswiper関数名,
},
と記載します。
- サムネを常に真ん中でアクティブにしておきたい
などの理由のときに使えるのかなと思います。（たとえが悪くてすみません）
私が実際に使った時は、年表（サムネ）と画像（メインスライダー）をswiperで実装したときに年表の年が常に真ん中でアクティブになる必要があってこのオプションが役に立ちました。
activeIndexを取得してスワイプ時にスライドを操作する
ますは下記のスライダーをご覧ください。
See the Pen Untitled by un-T Nakagawa (@n-yuttie) on CodePen.
左右両方とか片方にグラデーションとかモヤがかかっているスライダーです。（今回は右側だけ）
これもたまに見かけるスライダーかなと思います。
最後までスワイプしてもらうとわかるのですが、swiperにモヤをかけているだけなので、最後のスライドが見えたときもモヤはかかってままになっています。
カスタマイズを加えたスライダーが下記です。
See the Pen Untitled by un-T Nakagawa (@n-yuttie) on CodePen.
最後までスワイプしてもらうとモヤが消えるかと思います。
こちらについて解説していくと、
on: {
slideChange: () => {
...スライドが変わるたびにここに記載した処理を実行...
}
swiperのonパラメーターでイベントを登録します。
今回はslideChangeというイベントを登録し、スライドするたびに処理を発火させるようにしています。
今回登録した処理は、
on: {
slideChange: () => {
const wrap = document.querySelector('.mySwiper');
let num = swiper.activeIndex;
if (num === 3) {
wrap.classList.add('maskRemove');
} else {
wrap.classList.remove('maskRemove');
}
}
}
swiperのactiveIndexを取得し、それが3のときにmaskRemoveというクラスを付け外しするというものです。
swiperのactiveIndexとは、現在アクティブになっているスライドのことを指すので、今回だとスライドが全部で6枚あって、6枚目が表示されるように最後までスワイプすると一番左にあるアクティブスライドが4番目のスライドになります。
activeIndexの3番目はスライドの4番目に当たるので、クラスの付け外しが行われ、モヤが消えるという処理になっています。
余談になりますが、今回はモヤを表現するのにmask-imgというCSSプロパティを使っています。
今までスライダーでグラデーションのようなものを被せるときは、スライダーの上にグラデーション画像を置いていたのですが、このプロパティを使えば簡単なモヤであれば表現することができます。
今回は、swiper自体に
.swiper {
mask-image: linear-gradient(to right, black 0%, black 90%, transparent 100%);
}
と指定しています。
右端の10%部分に、右向きに透明になるグラデーションをかけています。
主要ブラウザも問題なく対応しているのでぜひ使ってみてください。
終わりに
swiperって公式のドキュメントが豊富でいろんなオプションなどがあるのに、英語というだけで少し敬遠しがちですよね。。
私も読むのはすごく苦手なのですが、一度ググってだいたいの概要を掴んでから公式ドキュメントを見て実装するように心がけています。
公式ドキュメント：https://swiperjs.com/swiper-api
公式デモ：https://swiperjs.com/demos
今回、2つしか例を挙げれませんでしたが、swiperを使う機会は本当に多いので、またいい物があれば更新していきたいと思います！