Swiperを1ページに複数設置して矢印なども色変更する方法

Swiperを1ページに複数設置するためにはいくつかコツがあります。
同じような内容をコピペすれば動くだろうと思っていましたが、うまくいかなかったので解決策をメモ。
Swiperの読み込み方などは省略しています。

この記事では以下の内容を紹介しています。

• 複数あるSwiperを正常に動作させる
• それぞれのSwiperの矢印の色を変更
• それぞれのSwiperのナビゲーション（小さい丸）の色を変更

Swiperに異なる名前をつける

swiperにIDを振って区別していきます。ここでつけるIDは他と被らないものにしましょう。

今回はfirstSwiperとsecondSwiperとしましたが、どんな名前でもOKです。

また、色を変更したいので、それぞれswiper-pagination-1 swiper-button-prev-1 swiper-button-next-1クラスを追加しました。

<div class="swiper" id="firstSwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <p>Slide 1</p>
    </div>
    <div class="swiper-slide">
      <p>Slide 2</p>
    </div>
    <div class="swiper-slide">
      <p>Slide 3</p>
    </div>
  </div>
  <div class="swiper-pagination swiper-pagination-1">
  </div>
  <div class="swiper-button-prev swiper-button-prev-1">
  </div>
  <div class="swiper-button-next swiper-button-next-1">
  </div>
  <div class="swiper" id="secondSwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <p>Slide 1</p>
      </div>
      <div class="swiper-slide">
        <p>Slide 2</p>
      </div>
      <div class="swiper-slide">
        <p>Slide 3</p>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-2">
    </div>
    <div class="swiper-button-prev swiper-button-prev-2">
    </div>
    <div class="swiper-button-next swiper-button-next-2">
    </div>
  </div>
</div>

それぞれのSwiper用JSを追加

先ほどつけたIDやクラスを使って、Swiper用のJSを追加します。
const firstSwiperとnew Swiper('#firstSwiper'の部分に注意して名前をつけます。
この2つも他と被らない名前にしましょう！

new Swiper('#firstSwiper〜としている部分がひとつめのSwiperです。
ひとつめのSwiperで使用しているページネーションとボタンもそれぞれ追加しています。
ここまで書くと、見た目はよくないですがSwiperが動く状態になりました。

// ひとつめのSwiper
const firstSwiper = new Swiper('#firstSwiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination-1',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next-1',
    prevEl: '.swiper-button-prev-1',
  },
});

// ふたつめのSwiper
const secondSwiper = new Swiper('#secondSwiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination-2',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next-2',
    prevEl: '.swiper-button-prev-2',
  },
});

ページネーション・矢印用CSSを追加

先ほどつけたクラスにCSSを追加します。
ページネーションは.swiper-pagination-1 .swiper-pagination-bullet 、矢印は.swiper-button-next-2,.swiper-button-prev-2です。

/* Swiperのドット色変更 */
.swiper-pagination-1 .swiper-pagination-bullet {
  background-color: red ;
}

/* Swiperの矢印色変更 */
.swiper-button-next-2,
.swiper-button-prev-2 {
    --swiper-navigation-color: #fff; 
}