ホームページ制作等のお問い合わせはこちら

Swiperでクリック式の複数行サムネイル型スライダーを作る【コピペOK】

coding

スライダーを簡単に作ることができるJavaScriptライブラリ「Swiper」。

Swiperは様々なデザイン・レイアウトのスライダーを簡単に作ることができ、公式デモにも多くの例が掲載されています。jQueryに依存していないこともあり、スライダーを作る際はもっぱらSwiperを使用しています。

ただ、今回ぼくが作成したかった”複数行のサムネイル式スライダー”が公式デモにはなかったため、記事にしておきます。

【完成形デモ】複数行のサムネイル式スライダー

See the Pen swiper_thumb by Seimah (@ck3333) on CodePen.

  • 下部サムネイルの画像をクリックすると、上部メインがその画像にスライドする
  • 下部サムネイルの枚数は可変。枚数が多い場合は2行目、3行目…となっていく。

公式デモにもサムネイル式のものは準備されているのですが、サムネイル部分が1行固定で左右に動かせるというもの。今回実装したい内容とは異なります(下記リンクの「Thums Gallery」)。

参考 Swiper DemosSwiper公式

【詳細】コーディングの解説

Swiperは公式サイトからファイルをダウンロードして読み込むか、CDNで読み込んでおきましょう。公式の手順が英語でわからない場合は、「Swiper 読み込み」等でググってみてください!

参考 Getting Started With SwiperSwiper公式

HTML

上部のメインは、Swiperの基本の型ですね。スライドの枚数分だけ swiper-slide を追加します。

下部のサムネイルでは、上部メインのスライド枚数分だけliタグを記述します。liタグ内のaタグの記述がポイントです。

リンクをクリックするとJavaScriptを呼び出す

aタグ内の設定で、クリックするとJavaScriptを呼び出すようにしています。

onclick属性内に実行したいJavaScriptを記述することで、リンクをクリックするとそのJavaScriptが実行されます。ここでは、slideThumb という関数が実行されます(後述)。

href属性内の javascript:void(0); は、リンククリック後のページ遷移を防ぐための記述です。「href=”#”」と記述してもOKです。

CSS

ここでは各サムネイルを1行3枚ずつになるように、flex-boxを使っています。1行の枚数はthumb-itemクラスのwidthを適当な値に変えればOK(flex-itemでも同義)。

JavaScript

上部はSwiperの基本記述ですね。今回は swiperMain という名前で定義しています。

下部がポイントです。Swiperに用意されているslideToメソッドを使います。

slideToメソッドを使う

メイン部分であるswiperMainに対して、slideToメソッドを使います。

引数としてindexを受け取った後、slideToメソッドが実行されるslideThumb関数を定義します(関数名はなんでも良いですが、onclickの関数名と合わせてください)。

先述の通り、aタグリンクをクリックするとslideThumb関数が呼び出されるようになっているので、slideToメソッドで同じインデックス番号のものにスライドするという仕掛けです。

なお、aタグにおいて「onclick=”slideThumb(1)”」のようにインデックス番号が0ではなく1から始まっているのは、swiperMainでloopを設定しているからです。

【発展】WordPressでカスタムフィールドと併用

このサムネイル式スライダーを応用すると、WordPress管理画面から好きな枚数のスライドを投稿し、それらを受け取って表示というのも実装できます。

カスタムフィールド用プラグインであるAdvance Customs Fields Proの、繰り返しフィールドとの合わせ技でOK。実際のコードは別記事にて紹介予定です。

Swiperを使えばスライダーは怖くない

スライダーを実装するときは、Swiperを使えば間違いない印象です。

今回紹介したslideToメソッド以外にも、Swiperには多くのメソッドや設定が用意されています。実装したい内容に沿って、公式APIを読んでみると解決策が見つかるかもしれません。

参考 Swiper APISwiper公式