swiper複数使用時のpaginationの挙動について

前提・問題点・実現したいこと

【前提】
現在、swiperを使用してページ内に2つのスライダーを設置しています。

【問題点】
各スライダーの下部にpaginationを設置しているのですが、
各スライダーのpaginationが合わせて動いてしまいます。
現状では、片方のpaginationをクリックするともう片方のpaginationも同様に動いてしまいます。

【実現したいこと】
各paginationをそれぞれ独立した動きにしたい。

どなたか知恵をお貸しいただけましたら幸いです。

該当のソースコード

html
1<!-- １つめのスライダー -->
2<div class="swiper-container-1">
3    <div class="swiper-wrapper">
4        <div class="swiper-slide">Slide 1</div>
5        <div class="swiper-slide">Slide 2</div>
6        <div class="swiper-slide">Slide 3</div>
7    </div>
8    
9    <!-- ナビゲーションボタン -->
10    <div class="swiper-button-prev"></div>
11    <div class="swiper-button-next"></div>
12</div>
13<!--  ページネーション -->
14<div class="swiper-pagination-1"></div>
15
16
17<!-- ２つめのスライダー -->
18<div class="swiper-container-2">
19    <div class="swiper-wrapper">
20        <div class="swiper-slide">Slide 1</div>
21        <div class="swiper-slide">Slide 2</div>
22        <div class="swiper-slide">Slide 3</div>
23    </div>
24    
25    <!-- ナビゲーションボタン -->
26    <div class="swiper-button-prev"></div>
27    <div class="swiper-button-next"></div>
28</div>
29<!--  ページネーション -->
30<div class="swiper-pagination-2"></div>
31

javascript
1<script type="text/javascript">
2	var swiper = new Swiper('.swiper-container-1', {
3		  loop: true,
4		  autoplay: {
5		    delay: 6000,
6		  },
7		  navigation: {
8                nextEl: '.swiper-button-next',
9                prevEl: '.swiper-button-prev',
10            },
11            pagination: {
12                el: '.swiper-pagination-1',
13                type: 'bullets',
14                clickable: true
15            }
16});
17</script>
18<script type="text/javascript">
19	var swiper = new Swiper('.swiper-container-2', {
20		  loop: true,
21		  autoplay: {
22		    delay: 7000,
23		  },
24		  navigation: {
25                nextEl: '.swiper-button-next',
26                prevEl: '.swiper-button-prev',
27            },
28            pagination: {
29                el: '.swiper-pagination-2',
30                type: 'bullets',
31                clickable: true
32            }
33});
34</script>

補足情報

swiperは公式サイトよりダウンロード
https://idangero.us/swiper/

行動規範の内容に同意します

回答2件

swiper.css では .swiper-container や .swiper-pagination に対してスタイルを適用しています。
別の名前にする場合でも元の名前も残すようにしましょう。

HTML
1<div class="swiper-container swiper-container-1">

投稿2019/04/19 07:59

x_x

総合スコア13749

hiro__12

2019/04/19 11:36

回答ありがとうございます。勉強になります！

行動規範の内容に同意します

ベストアンサー

試していないのですが、こういう書き方とかできませんか？

js
1navigation: {
2      nextEl: '.swiper-container-1 .swiper-button-next',
3      prevEl: '.swiper-container-1 .swiper-button-prev',
4},

投稿2019/04/19 06:55

kei344

総合スコア69407

hiro__12

2019/04/19 07:24

```javascript pagination: { el: 'swiper-container-1 .swiper-pagination', }, ``` 上記のようにして確認しましたが paginationそのものが消えてしまったのでできなさそうです。また、navigationに関してはそれぞれ独立に動作します。