7/15JavaScript2021年7月15日Swiperとは、スライダー(カルーセル)を簡単に作成できるJSライブラリです。jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高機能なスライダーを実装できるので、かなり便利ですね。今回の記事ではサムネイル付きの画像スライダーを実装してみましたので、紹介していこうと思います。実際に動くDEMOやコピペOKのコードを用意していますので、ぜひ参考にしてみてください。目次サムネイル付きの画像スライダーのDEMOまずは今回実装していくスライダーのDEMOを確認しましょう。以下に実際のDEMOを用意しました。スライダーの仕様は、以下のようになっています、メインの画像スライダーとサムネイルスライダーをそれぞれ作成スライド移動にはメインの画像をドラッグするか、サムネイルをクリックサムネイルスライダーはドラッグで横移動可能アクティブ中のサムネイルは透明度を1に、それ以外は0.5に【コピペ用】サムネイル付きの画像スライダーの実装コード以下にHTML・CSS・JavaScriptのコピペ用コードを用意しました。script.jsを作成してそれぞれコピペしてください。画像は各自用意して使用してください。メインのスライダーとサムネイルのスライダーには同じ画像を指定してもいいですし、もしサムネイル用の画像がある場合はそちらを指定してください。});});これらをコピペするだけで、DEMOと同じスライダーを実装することができます。画像は各自で用意していただく必要がありますので、その点は注意してください。次の章でコードの解説をしていきますので、カスタマイズしたい・コードを理解したいという方は読み進めてください。【解説】サムネイル付きの画像スライダーの実装コード解説ここからは、以下の順番で実装コードの解説をしていきます。Swiperを読み込むHTMLの解説CSSの解説JavaScriptの解説1Swiperを読み込むまずSwiperを使用するにあたって、ファイルを読み込む必要がありますね。ここでは一番手軽に読み込むことができるCDNを使用します。src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>上記の2行を、HTML内に記入してください。記入する箇所は以下の通りです。src="script.js"></script></body>CSSは<head>タグ内、JavaScriptは</body>タグの直前で読み込むことが推奨されています。CDNの後にstyle.cssやscript.jsを置くようにしてください。npmでのインストール、アセットを直接ダウンロードするなど他にも読み込む方法はありますので、詳しくはSwiperの公式ページから確認してください。2HTMLの解説まずHTMLでは、メインの画像スライダーと、サムネイルスライダーの2つのスライダーのタグを設置します。</div></div>JavaScriptで指定するために、メインのスライダーにはslider、サムネイルスライダーにはthumbnailクラスを付与しておきます。swiper-から始まるクラスがついていますが、これらはSwiperのCSSから読み込まれるベースのスタイルが設定されているので、そのままにしておいてください。【ポイント】スライドの枚数と順番は揃えておくメインのスライダーとサムネイルスライダーのスライド枚数と順番は必ず揃えてください。メイン・サムネイルの2種類のスライダーを連携させるため、枚数や順番が異なっているとうまく表示されません。2つのスライダーの中身は全く同じにしておくと実装しやすいかと思います。</div></div>メイン・サムネイル両方のスライダーに、同じ画像が設定されていますね。「サムネイルスライダーには、サムネイル専用の画像を使いたい」という場合は、スライドの枚数・順番に注意して以下のように設定してください。</div></div>メインにはimg01.jpg、サムネイルにはimg-thumb01.jpgという風に、画像を分けたパターンです。サムネイルに最適化した画像を用意する場合は、こちらの方法でもいいですね。3CSSの解説スタイルに関してはCDNで読み込んだSwiperのCSSでほとんど用意されていますので、足りない部分のみ付け足していきます。100%を指定します。これでスライドの領域に画像を広げることができました。次にサムネイルのスタイルを指定します。アクティブ中のサムネイルと、それ以外のサムネイルに差をつけたいので、以下のように指定します。これで全てのサムネイル画像が半透明になりました。これでアクティブ中のサムネイルはそのまま表示され、それ以外は半透明にすることができます。今回はopacityを使用しましたが、borderの色を変える・色付きのオーバーレイをかけるなども可能ですので、各自カスタマイズしてみてください。最後にJavaScriptでスライダーのオプションを指定していきます。});});サムネイルスライダーのオプションまずはサムネイルスライダーの設定からみていきます。true,});まずはHTMLで用意した.thumbnailクラスがついたスライダーを指定する必要がありますね。Swiperの第一引数に、操作したいスライダーのクラスを指定します。ここにオプションを指定}HTMLでサムネイルスライダーに対して.thumbnailクラスを付与したので、上のように指定します。次は中に指定するオプションを見ていきます。true,});freeModeは、横スクロール・横スワイプする際に固定ポジションで止まらないようにする設定です。こちらは必須の設定ではない&言葉では説明しにくいので、falseにしてみて違いを確認し、好きな方を使ってください。slidesPerViewは初期状態で何枚のスライドを表示するか、spaceBetweenはスライド間の余白を指定できます。これらも好みによるかと思いますので、各自調整してください。watchSlidesVisibilityは、現在表示されているスライドに対して追加のvisibleクラスを付与するためのオプションです。watchSlidesProgressは具体的にどのような処理がされているかは公式を見ても理解できませんでしたが、↑のオプションとセットで使用する必要があるようです。これらをtrueにすることで、メインのスライダーとサムネイルスライダーが連動して動くようになります。以上でサムネイルスライダーの解説は終わりです!メインスライダーのオプション続いてメインのスライダーを見ていきましょう。},});先ほどと同様、HTMLで用意した.sliderクラスがついたスライダーを取得します。ここにオプションを指定});次に中に指定するオプションですが、thumbsを使用します。},});thumbsのオブジェクト内にあるswiperには、サムネイルとして使用したいスライダーを指定することができます。サムネイルスライダーには、thumbnailという名前を指定しましたね。swiperの値にはthumbnailが入ります。これでメインのスライダーとサムネイルスライダーを連携させることができました!メインのスライダーはなるべくシンプルにしてありますので、他にもいろいろ設定してみてください。これでJavaScriptの解説は終わりです。【まとめ】サムネイル付きの画像スライダーを実装する方法Swiperでサムネイル付きのスライダーを実装する方法を紹介しました。今回はthumbsオプションで2つのスライダーを連携させるという方法を紹介しましたが、個人的には全く同じ中身のスライダーを2つ設定するのは無駄かなと思っています...。「メインスライダーとサムネイルスライダーで、別々の画像を使用したい」という場合は、この方法でも良さそうですね。paginationをカスタマイズする方法だと1つのスライダーでサムネイルを実装できるようですので、機会があればそちらも試してみようと思います。Swiper記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。