この記事ではSwiper.jsを採用して、キービジュアルとサムネイルが連動するようなスライダーを実装する方法をご紹介します。
限られたスペースで多くの画像を見せたい場合の解決方法としてめっちゃ汎用性効きます。
ちなみにSwiper.jsはjQueryが不要というのが最高です。
カスタム方法とかやってることを知りたい方は以下読み進めてみてください。
Swiper.jsを直接配置 or 外部から読み込む
Swiper.jsを利用するための下準備をしていきます。
直接配置する場合
以下サイトからZIPファイルをダウンロードして設置するのがまず王道です。
https://github.com/nolimits4web/swiper
CSSファイル：Swiper.css or Swiper.min.css
JSファイル：Swiper.js or Swiper.min.js
cssとjsファイルを引っ張ってきてページに適用すればOKです。
外部から読み込んでくる場合
ファイル設置は面倒、とにかく動けばいいから！という方は外部から読み込んでサクッと利用するのも良いでしょう。
▼CSSを外部から読み込む：<head></head>内に記載してください、style.cssやreset.cssの直下が良いです。
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
▼JSを外部から読み込む：</body>タグの直前に貼り付けるのを推奨します。
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
SwiperのHTML/CSS/JavaScript
SwiperのHTML、CSS、JSのコードを記載しておきます。コピペで動きます。
HTML + JS
※JavaScriptもhtmlファイルに書いちゃっています。
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css"><!-- slider --> <div class="swiper-container slider slider__sample"> <div class="swiper-wrapper"><div class="swiper-slide"><img src="https://3.bp.blogspot.com/-esJ3eqpx3Vc/XMZ94CFpjHI/AAAAAAABSmE/eJFVEHwpty0fxzrsX_Pmtw89nvUDxQt_QCLcBGAs/s800/ishiki_hikui_man.png" alt="sample"></div><div class="swiper-slide"><img src="https://www.kawamurakazuyuki.com/wp-content/uploads/2017/04/A118E8D0-E7EF-463C-B0A3-A1E1CFAEA6C4-300x287.png" alt="sample"></div><div class="swiper-slide"><img src="https://d2dcan0armyq93.cloudfront.net/photo/odai/600/8dead1e22e98b49f75819392008a8cf8_600.jpg" alt="sample"></div><div class="swiper-slide"><img src="https://image.news.livedoor.com/newsimage/b/3/b35d0_80_ccc74a6a_6073afcd-m.png" alt="sample"></div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div></div><!-- thumbnail --><div class="swiper-container slider-thumbnail slider-thumbnail__sample"> <div class="swiper-wrapper"><div class="swiper-slide"><img src="https://3.bp.blogspot.com/-esJ3eqpx3Vc/XMZ94CFpjHI/AAAAAAABSmE/eJFVEHwpty0fxzrsX_Pmtw89nvUDxQt_QCLcBGAs/s800/ishiki_hikui_man.png" alt="sample"></div><div class="swiper-slide"><img src="https://www.kawamurakazuyuki.com/wp-content/uploads/2017/04/A118E8D0-E7EF-463C-B0A3-A1E1CFAEA6C4-300x287.png" alt="sample"></div><div class="swiper-slide"><img src="https://d2dcan0armyq93.cloudfront.net/photo/odai/600/8dead1e22e98b49f75819392008a8cf8_600.jpg" alt="sample"></div><div class="swiper-slide"><img src="https://image.news.livedoor.com/newsimage/b/3/b35d0_80_ccc74a6a_6073afcd-m.png" alt="sample"></div> </div></div><script src="https://unpkg.com/swiper/js/swiper.min.js"></script><script> var sliderThumbnail = new Swiper('.slider-thumbnail__sample', { slidesPerView: 4, freeMode: true, watchSlidesVisibility: true, watchSlidesProgress: true, }); var slider = new Swiper('.slider__sample', { navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev', }, thumbs: {swiper: sliderThumbnail } });</script>
CSS
.swiper-container { width: 300px;}.swiper-container .slider-thumbnail { border: 1px solid #333;}.swiper-container .swiper-wrapper .swiper-slide { opacity: 1; overflow: hidden; padding: 2px; font-size: 0;}.swiper-slide { border: 1px solid #C0C0C0; cursor: pointer; border-collapse: collapse; box-sizing: border-box;}.swiper-slide img { object-fit: cover; width: auto; height: 300px;}.swiper-slide-thumb-active { opacity: .3!important;}.slider-thumbnail .swiper-slide img{ margin: 10px 0; height: 60px; width: auto}
▼出来上がるサムネイル連動型スライダー
デモページ
１ページ内に複数のスライダーを設置する場合
１ページ内に複数のスライダーを設置する場合は少し注意が必要です。
HTMLファイルのclass名に番号を振るなどして、IDをユニークにする必要があります。
slider__sampleslider-thumbnail__sample
slider__sampleなら、
slider__sample1、slider__sample2、slider__sample3
slider-thumbnail__sampleなら、
slider-thumbnail__sample1、slider-thumbnail__sample2、slider-thumbnail__sample3
JavaScript側の記述も増やしたいスライダー数に応じて、追加するのを忘れずに。
そろそろ新しい技術を身に着けなきゃな…という方は思い切って働く環境を変えてみるのも良いかもしれません。
自身の学びたい言語やフレームワークを伝えることで、最適な企業を一緒に見つけてくれるTech Stars Agent
に相談してみるのがおすすめです。
現役エンジニアのエージェントが多数所属しているので、深く相談できるのが嬉しいポイントです。