Zenn
Open7

Swiper.jsについて

JavaScript
ライブラリ
swiper
カルーセル
スライダー
ピン留めされたアイテム
yukiyamayukiyama

Swiper.jsについて

WEBサイト制作でよく使われているスライダー（カルーセル）を簡単に実装することができるライブラリ。
スライダーを自分で1から作るのは手間がかかるため、このようなライブラリを使って実装することが多いと思います。
よく見かけるのが「slick.js」と「Swiper.js」で、どちらも簡単にスライダーを実装できるライブラリですが、大きな違いとしてslick.jsはjQueryに依存して、Swiper.jsはjQueryに依存しないいわゆるVanilla Jsです（Wordpress＋Elementor環境で実装できました）。また、Swiper.jsの方がオプションが多くカスタマイズ性が高かったり、スワイプ時の挙動が良い、更新頻度が高いのでサポート面でも安心といったメリットもあるようなので、自分は基本的にSwiper.jsを使用しています。どの方法を採用するかは最新の情報を調べつつ案件や状況に合わせて採用するのが良いと思います。

導入方法

①npmインストール
②cdn読み込み
③ファイルをダウンロードして読み込む
いずれかの方法でSwiper.jsを読み込むことで利用できます。

Swiper.js公式を参照してください。

バージョンについて

2024年2月現在でバージョン11系が最新のようです。バージョンによって仕様が異なっている場合があり、参考サイトのコードをそのままコピーしてもバージョンが違うことで上手く動かないことがあります。例えば、バージョン9以降はループするスライダーをつくる際、HTMLにループする用の画像を余分に用意する必要があり、バージョンに合わせて作り方を変える必要があります。
参考：https://junpei-sugiyama.com/swiper-loop/#st-toc-h-2

用意されているオプションもバージョンによって使えるものと使えないものがあり、場合によっては古いバージョンを使うことで解決することもあります。

yukiyamayukiyama

Swiper.jsを使ったスライダーのカスタマイズデモ

■Swiperのバージョン
8

■カスタマイズ内容
・メイン画像を1枚ずつ表示
・サムネイル表示
・サムネイルにスクロールバー
・矢印ボタン（カルーセルの外）
・サムネイルと矢印ボタンの連動
・サムネイルのスワイプ
・表示している画像とテキストの連動
・レスポンシブ

yukiyamayukiyama

参考サイト

とても参考になります🙇‍♂️

yukiyamayukiyama

上手くいかなかったこと、つまづいたこと

サムネイル連動+無限ループ

サムネイル連動＋無限ループを実装している例があったが、バージョン6系の例でバージョン8では上手くいかなかった。
https://notes.sharesl.net/demo/swiper-thumbs/
（一番最後までいくと巻き戻るような動きはできた）

■解決方法
・バージョン6系など他のバージョンを試す（バージョン変えることで他のオプションなど機能しない可能性あり）
・仕様を変える。

非アクティブの前へ次へボタンをドラッグ（スワイプ）すると一瞬表示されたりクリックできてしまう

どうしてもドラッグ（スワイプ）できる状態だと判定が入ってしまう。
■解決方法
・メインスライド部分はドラッグ（スワイプ）できないようにして対応

simulateTouch: false //タッチ無効

threshold: 10 でしきい値を設定できましたが、わずかでもスワイプの判定が入ってしまい、おかしな挙動が見られたので無効に。。

サムネイルをタップ(クリック)して移動しようとしても反応しないことがある

■解決方法
タップしたつもりでもわずかにスワイプ判定が入ってしまいタップが効かないような挙動になる。
・スワイプのしきい値を設定

threshold: 10 //しきい値を設定。スワイプ距離10px未満はスワイプ判定にならない
fadeにすると次のスライドが重なって見えてしまう

background-imageではなくimgタグを使う場合や background-size: contain; などの場合は縦横比が統一されない可能性があるため後ろにあるスライドが見えてしまうことがある
■解決方法

fadeEffect: { crossFade: true }

を設定する
■参考
https://zenn.dev/ytk6565/articles/swiper-effect-fade