インジケーター部分を画像にしたSwiperスライダーを実装してみる（備忘録）

/1 コメント/カテゴリ: , , , , /作成者:

今回はインジケーター部分を画像にしたSwiperスライダーを実装していく。ナビゲーション（画像両端の矢印）もつけた状態で対応する。また、前回の記事のソースをもとに対応していく。

前回の記事はこちら

demo

HTMLの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Swiperスライダー</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <div class="swiper mySwiper2">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="img1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img3.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img4.jpg" />
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="img1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img3.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="img4.jpg" />
        </div>
      </div>
    </div>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu2">
        <h2>menu2</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu3">
        <h2>menu3</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu4">
        <h2>menu4</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu5">
        <h2>menu5</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
  </main>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script src="style.js"></script>
</body>
</html>

前回の記事から変更したのは、下記部分である。スライダーを2つ作るという考え方で読み進めると理解しやすくなるかと思う。

ちなみに下記の公式のdemoページを参考にして作成している。

Swiper Demos

<!-- ナビゲーション（画像両端の矢印）ありのスライダー部分 -->
<div class="swiper mySwiper2">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img1.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img2.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img3.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img4.jpg" />
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<!-- インジケーター部分を画像にしたサムネイル部分 -->
<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img1.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img2.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img3.jpg" />
    </div>
    <div class="swiper-slide">
      <img src="img4.jpg" />
    </div>
  </div>
</div>

ナビゲーション（画像両端の矢印）ありのスライダー部分

これはこれまで通り作成するのだが、demoページと合わせて対応した方がわかりやすいと思うので、それに合わせた解説で進めていく。

変更点はswiper mySwiper2のクラス部分だ。

今回はスライダーを2つ作っていく関係で、mySwiper2とmySwiperのクラスに分けて作成する必要がある。

今回はナビゲーション（画像両端の矢印）ありのスライダー部分に対しては、mySwiper2というクラス名をつけている。

あとの部分は前回と変わらないため、解説は省略する。

インジケーター部分を画像にしたサムネイル部分

こちらの実装はこれまでスライダーを作る工程と変わらない。

この2つ目のスライダーについては、mySwiperのクラス名をつけることで、先ほど作成した「ナビゲーション（画像両端の矢印）ありのスライダー」と分けて使えるようになる。

HTMLに関してはこれだけの対応でOK。

CSSの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  position: relative;
}
img {
  width: 100%;
}

/* ==========================
  swiperslider
========================== */
.swiper {
  width: 100%;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev,
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  background-color: #ccc;
  border-radius: 50%;
  padding: 30px;
}
.swiper-button-next:focus,
.swiper-rtl .swiper-button-prev:focus,
.swiper-button-prev:focus,
.swiper-rtl .swiper-button-next:focus {
  outline: none;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  color: #fff;
  font-size: 24px;
}
.mySwiper {
  margin-top: 10px;
}
.mySwiper .swiper-slide {
  opacity: 0.4;
}
.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

/* ==========================
  コンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 20px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 150%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}

CSSは下記部分を追記している。

.mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}

例えばページ上で、「ナビゲーション（画像両端の矢印）ありのスライダー部分」の2枚目が表示されているようなとき、「インジケーター部分を画像にしたサムネイル部分」の2枚目が連動して表示されるように見せるための設定をしている。

文字だとわかりにくいかもしれないので、下記に画像も貼るので参考にしてみてほしい。

JavaScriptの記述について

'use strict'

// swiperslider
const swiper = new Swiper('.mySwiper', {
  spaceBetween: 10,
  slidesPerView: 4,
  watchSlidesProgress: true,
})
const swiper2 = new Swiper('.mySwiper2', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: swiper,
  },
})

こちらは結構変更が入っているのでややこしくなるかもしれない。順を追って解説していく。

インジケーター部分を画像にしたサムネイル部分

const swiper = new Swiper('.mySwiper', {
  spaceBetween: 10,
  slidesPerView: 4,
  watchSlidesProgress: true,
})

ここの記述部分は、「インジケーター部分を画像にしたサムネイル部分」のスライダーにあたる。

下記に解説はしているが、公式ドキュメントもご覧になりたい方は下記ページも参考にするといいかと思う。

Swiper API

spaceBetweenについて

spaceBetweenで値を入れることで、画像と画像の間に余白をつけることができる。なので、CSSで指定する必要もなくなる。今回は10の余白がつくように指定した。

slidesPerViewについて

slidesPerViewは値を指定すると、スライダーを表示させる幅の中にいくつの画像を表示させたいかの指定ができる。今回は4つ表示させている。

watchSlidesProgress

trueにすることで、スライドの進行状況と可視性を計算することができる。また、今表示されているスライダー（オンになっているスライダー）に対して、クラスが付与されるようになる。

ナビゲーション（画像両端の矢印）ありのスライダー部分

const swiper2 = new Swiper('.mySwiper2', {
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: swiper,
  },
})

HTML側でmySwiper2とクラス名をつけている関係で、constで定義する変数もswiper2にして、分けて作成するようにしている。

下記部分が前回とは違う部分になるので解説していきたい。公式だと下記ページ部分にあたる。

Swiper API

thumbs: {
  swiper: swiper,
}

thumbsにswiper:を指定すると、swiperのサムネイルを初期化するためのswiperパラメーターを持つオブジェクトとして使用できるようになる。

ちょっと無理やり翻訳しているのでわかりにくいかもしれないが、要は「インジケーター部分を画像にしたサムネイル部分」を「ナビゲーション（画像両端の矢印）ありのスライダー部分」として紐づけて使用できるようにするためにした記述だと思っていただけるとよいかと思う。

指定先をswiperにしているが、これは先ほどconstでswiperと定義した下記の内容がそのまま入っているという認識でOKだ。

const swiper = new Swiper('.mySwiper', {
  spaceBetween: 10,
  slidesPerView: 4,
  watchSlidesProgress: true,
})

自分なりに読み解いて解説してみたが、間違いなどがあったら指摘いただければと思う。

以上で実装完了だ。

1 返信

トラックバック & ピングバック

  1. インジケーター部分の画像数を任意の表示にしたSwiperスライダーを実装してみる（備忘録） – freefuntimes より:
    2022年3月18日 8:15 AM

    […] 前回の記事はこちら […]

コメントはクローズされています。