Swiperのナビゲーションが連動しないようにしたい

Question

同一ページのSwiperのナビゲーションが連動してしまいます

Swiperでスライダーを作っています。
同一ページに2枚のSwiperを設置しています。

ナビゲーションをスライドの外に設置したところ、ナビゲーションをクリックすると2枚が連動して動いてしまうようになりました。
（スライドの中に設置すると連動することなくそれぞれ動くことができています）

該当のソースコード

<div class="swiper_container1">

  <!-- Slider1全体のコンテナ -->
    <div class="swiper slide1">

      <!-- Sliderの内包コンテナ -->
        <div class="swiper-wrapper">

          <!-- Slideさせたいコンテンツ -->
          <div class="swiper-slide"></div>
          <div class="swiper-slide"></div>
          <div class="swiper-slide"></div>
   
          <!-- ナビゲーションボタン -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

        </div>
    </div>
</div>


<div class="swiper_container2">

  <!-- Slider2全体のコンテナ -->
    <div class="swiper slide2">

      <!-- Sliderの内包コンテナ -->
        <div class="swiper-wrapper">

          <!-- Slideさせたいコンテンツ -->
          <div class="swiper-slide"></div>
          <div class="swiper-slide"></div>
          <div class="swiper-slide"></div>

        </div>
    </div>

    <!-- ナビゲーションボタン -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

const slider1 = new Swiper('.slide1', {
 // Navigation arrows
 navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

const slider2 = new Swiper('.slide2', {
  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

試したこと

スライドに- slide1- slide2 のクラスを当てて、ナビゲーションをそれぞれ指定しようとしたができませんでした。

どうぞよろしくお願いいたします。

Answer 1

nextEl: '.swiper_container2 .swiper-button-next',などとするとどうでしょうか。

Comments

[ayu_mi]

ありがとうございます。
それぞれクラス名を加えたら別々に動きました。
とても助かりました。

navigation: {
nextEl: '.swiper_container1 .swiper-button-next',
prevEl: '.swiper_container1 .swiper-button-prev',
},
navigation: {
nextEl: '.swiper_container2 .swiper-button-next',
prevEl: '.swiper_container2 .swiper-button-prev',
},