【Swiper】サムネイルクリックでスライドが切り替わるスライダーの作り方【ECサイト風】

◯OZOTOWNみたいなサムネイルをクリックしたらスライドが切り替わるスライダーを作りたい。

今回は画像サムネイルをクリックしたらスライドが切り替わるスライダーをSwiper.jsで作る方法を解説します。

Swiperについては下記の記事を参照してください。

Web制作初心者のためのSwiper入門【Javascript】
づみ
づみ

Swiperを使えばサムネイルクリックのスライドもメチャクチャ簡単にできます！

今回つくるのは下記のようなスライダーです。

See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.

Swiperでサムネイルクリックでスライドが動くスライダーを作る方法

下記の手順で作っていきます。

  1. 基本のスライダーをつくる
  2. サムネイル部分のスライダーを作る
  3. スライダーを動かしてみる
  4. スタイルを調整する

基本のスライダーを作る

まずはSwiperを導入しましょう。

今回は詳しく解説せずにコードだけ貼っておくので下記をコピペしてください。Swiperの基本を知りたい方はこちら

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <!-- CDN CSS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- CDN JS -->
</head>
<body>
  <div class="container">
    <div class="swiper" id="mainSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://source.unsplash.com/N04FIfHhv_k/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/2l0CWTpcChI/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/U3aF7hgUSrk/" alt=""></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</body>
<script>
  const swiper = new Swiper('#mainSwiper', {
    navigation: {
      prevEl: '.swiper-button-prev',
      nextEl: '.swiper-button-next'
    },
  });
</script>

CSS

img {
  max-width: 100%;
  max-height: 100%;
}
.container {
  width: 500px;
  margin: 0 auto;
}
#mainSwiper {
  width: 600px;
  height: 350px;
  max-width: 100%;
}
.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

これで下記のような形になると思います！

See the Pen thumbSwiper 1 by yoshizumi1102 (@yoshizumi1102) on CodePen.

サムネイル部分のスライダーを作る

では、サムネイル部分（クリックするところ）のスライダーも作っていきましょう。上で記述したコードを複製して別のID名をつけるだけでOK

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"> <!-- CDN CSS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> <!-- CDN JS -->
</head>
<body>
 <div class="container">
    <!-- メイン画像部分 START -->
    <div class="swiper" id="mainSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://source.unsplash.com/N04FIfHhv_k/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/2l0CWTpcChI/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/U3aF7hgUSrk/" alt=""></div>
      </div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <!-- メイン画像部分 END -->

    <!-- サムネイル画像部分 START -->
    <div id="thumbSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://source.unsplash.com/N04FIfHhv_k/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/2l0CWTpcChI/" alt=""></div>
        <div class="swiper-slide"><img src="https://source.unsplash.com/U3aF7hgUSrk/" alt=""></div>
      </div>
    </div>
    <!-- サムネイル画像部分 END -->
  </div>
</body>
<script>
  const swiper = new Swiper('#mainSwiper', {
    navigation: {
      prevEl: '.swiper-button-prev',
      nextEl: '.swiper-button-next'
    },
  });
</script>

CSS

お次に、CSSも整えておきます。サムネイル画像は3枚横並びになるように横幅を指定してあげます。

また、どのサムネイル画像が今表示されているかわかりやすいようにopacityを指定しています。

img {
  max-width: 100%;
  max-height: 100%;
}
.container {
  width: 500px;
  margin: 0 auto;
}
#mainSwiper {
  width: 600px;
  height: 350px;
  max-width: 100%;
}
.swiper-slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/*ここから追加分*/
#thumbSwiper {
  height: 100px;
  margin-top: 10px;
}

#thumbSwiper .swiper-slide {
  width: calc(100% / 3);
  opacity: 0.4;
}
#thumbSwiper .swiper-slide-thumb-active {
  opacity: 1;
}

これで下記のような状態になるはず。

See the Pen thumbSwiper 2 by yoshizumi1102 (@yoshizumi1102) on CodePen.

サムネクリックでスライダーが動くようにする

今回のポイントです。といってもやり方はかんたん。JSコードをモリモリと書いていきましょう。

Javascript

完成形は下記です。

// サムネイルのスライダー設定
const thumbSwiper = new Swiper('#thumbSwiper', {
slidesPerView: 3,
spaceBetween: 10
});

// メインのスライダー設定
const swiper = new Swiper('#mainSwiper', {
navigation: {
  prevEl: '.swiper-button-prev',
  nextEl: '.swiper-button-next'
},
// サムネイルを指定する
thumbs: {
  swiper: thumbSwiper
}
});

ポイントをひとつずつ解説していきますね。

サムネイルのスライダーを作る

サムネイル要素にもスライダーを指定していきます。記述するオプションはSlidesPerViewくらいでOKです。

// サムネイルのスライダー設定
const thumbSwiper = new Swiper('#thumbSwiper', {
slidesPerView: 3, // 一度に表示するスライドの数
spaceBetween: 10 // スライド間の間隔
});

メイン画像のスライダーオプションを追加

// メインのスライダー設定
const swiper = new Swiper('#mainSwiper', {
// サムネイルを指定する（今回の追加箇所）
thumbs: { 
  swiper: thumbSwiper　
}
});

次にメイン画像のスライダー部分にオプションを追加します。SlidesPerViewとthumbsを指定します。

thumbsオプションは、Swiperのデフォルトオプションです。サムネイルを指定することができます。ここでは上で作ったthumbSwiperを指定しています。

ここまでできたらOK！下記のように動きましたか？

See the Pen Untitled by yoshizumi1102 (@yoshizumi1102) on CodePen.

動かない場合

下記2点をチェックしてみてください。

  • thumbsSwiperがswiperよりあとに指定されている
  • Javascriptが読み込まれていない（別ファイルで作成している場合は<body>直下で読み込ませてください）

まとめ

というわけでSwiperでサムネイル画像をクリックしたらメイン画像が連動して動くスライダーの作り方でした。ECサイトなどを作るときは是非お使いください！

コメントを残す

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

CAPTCHA


前の記事

Swiperの矢印をカスタマイズする方法【CSS・画像別で紹介…

次の記事

【Swiper】左右の画像が見切れたスライダーを作る方法