2021年2月19日SHAREツイートシェアはてブLINEPocketスポンサーリンクこんにちは、もやし(@moyashi3333)です。フリーランスとして、主にWeb制作・コーディングの仕事をしています。今回は、サイト制作でよく実装される「スライダー」の発展的な内容になります。スライダーを簡単に作ることができるJavaScriptライブラリ「Swiper」。Swiperは様々なデザイン・レイアウトのスライダーを簡単に作ることができ、公式デモにも多くの例が掲載されています。jQueryに依存していないこともあり、スライダーを作る際はもっぱらSwiperを使用しています。今回ぼくが作成したかった”複数行のサムネイル式スライダー”が公式デモにはなかったため、記事にしておきます。CodePen.下部サムネイルの画像をクリックすると、上部メインがその画像にスライドする下部サムネイルの枚数は可変。枚数が多い場合は2行目、3行目...となっていく。公式デモにもサムネイル式のものは準備されているのですが、サムネイル部分が1行固定で左右に動かせるというもの。【詳細】コーディングの解説Swiperは公式サイトからファイルをダウンロードして読み込むか、CDNで読み込んでおきましょう。onclick="slideThumb(6)"></a></li></ul>上部のメインは、Swiperの基本の型ですね。下部のサムネイルでは、上部メインのスライド枚数分だけliタグを記述します。liタグ内のaタグの記述がポイントです。リンクをクリックするとJavaScriptを呼び出すaタグ内の設定で、クリックするとJavaScriptを呼び出すようにしています。onclick="slideThumb(1)"></a>onclick属性内に実行したいJavaScriptを記述することで、リンクをクリックするとそのJavaScriptが実行されます。いう関数が実行されます(後述)。リンククリック後のページ遷移を防ぐための記述です。「href=”#”」と記述してもOKです。}ここでは各サムネイルを1行3枚ずつになるように、flex-boxを使っています。1行の枚数はthumb-itemクラスのwidthを適当な値に変えればOK(flex-itemでも同義)。swiperMain.slideTo(index);}上部はSwiperの基本記述ですね。いう名前で定義しています。Swiperに用意されているslideToメソッドを使います。slideToメソッドを使うメイン部分であるswiperMainに対して、slideToメソッドを使います。swiperMain.slideTo(index);}引数としてindexを受け取った後、slideToメソッドが実行されるslideThumb関数を定義します(関数名はなんでも良いですが、onclickの関数名と合わせてください)。先述の通り、aタグリンクをクリックするとslideThumb関数が呼び出されるようになっているので、slideToメソッドで同じインデックス番号のものにスライドするという仕掛けです。aタグにおいて「onclick=”slideThumb(1)”」のようにインデックス番号が0ではなく1から始まっているのは、swiperMainでloopを設定しているからです。【発展】WordPressでカスタムフィールドと併用このサムネイル式スライダーを応用すると、WordPress管理画面から好きな枚数のスライドを投稿し、それらを受け取って表示というのも実装できます。Proの「繰り返しフィールド」との合わせ技でOKですね。Swiperを使えばスライダーは怖くないスライダーを実装するときは、Swiperを使えば間違いない印象です。今回紹介したslideToメソッド以外にも、Swiperには多くのメソッドや設定が用意されています。実装したい内容に沿って、公式APIを読んでみると解決策が見つかるかもしれません。失敗しない矯正歯科の選び方|裏側矯正体験者の僕が重視した5つの...次の記事css設計手法とは?cssコーディングの効率化・保守性アップコンタクトお問い合わせよく読まれている記事1僕が大人になってから100万円をかけて歯列矯正を始めた唯一の理由2「洋服のお直し屋さん」は体型変化の救世主。ウエスト調整してもらったよ!3歯列矯正って大変?裏側矯正中の僕がストレスを感じる瞬間とその対策4失敗しない矯正歯科の選び方|裏側矯正体験者の僕が重視した5つのポイント5矯正装置を外しました!裏側矯正の治療を終えて思うこと・変わったこと6矯正治療の概要を知ろう!裏側矯正に実際にかかった費用の内訳も公開7Voicy(ボイシー)の使い方・機能|ラジオ感覚で楽しめるボイスメディア8【保存版】会社員のメリットを8つ具体的にまとめてみた。プロフィール27歳のWeb系フリーランス。大阪大学を卒業後、5年弱会社勤め。現在はWeb制作をメインに、フリーランスとして活動中。ファッション、漫画、おいしいご飯が好き。