Tips

【Swiper】KVとサムネイル連動が連動するスライダーの実装方法

swiper slider

この記事では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 */

.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
}

 

▼出来上がるサムネイル連動型スライダー

デモページ

1ページ内に複数のスライダーを設置する場合

1ページ内に複数のスライダーを設置する場合は少し注意が必要です。

HTMLファイルのclass名に番号を振るなどして、IDをユニークにする必要があります。

slider__sample

slider-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に相談してみるのがおすすめです。

現役エンジニアのエージェントが多数所属しているので、深く相談できるのが嬉しいポイントです。

無料でキャリア相談してみる

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA