swiperを使って一つのサイトで違う種類のスライダーを2つ作りたい

前提・実現したいこと

現在webサイトを作る練習をしています。
swiperを利用して、サイト内に違う演出のスライダーを2つ作りたいです。
下記のサイトを参考にスライダーを作成しました。
https://haniwaman.com/swiper/

このサイトで言う所の6番(スライダーが何枚あって今何番目か把握できるようにしたい)と
11番（複数のスライドが見えているように）の2つのスライダーを１つのサイト内に作りたいです。

片方だけならどちらも動作を確認しました。
しかし、両方入れようとすると片方に不具合が生じます。

該当のソースコード

html
1<div class="swiper-container">
2        <div class="swiper-wrapper">
3          <div class="swiper-slide"><img src="" alt="Swiper01"></div>
4          <div class="swiper-slide"><img src="" alt="Swiper02"></div>
5          <div class="swiper-slide"><img src="" alt="Swiper03"></div>
6        </div>
7        <div class="swiper-pagination"></div>
8      </div>
9     
10
11        <div class="swiper-container2">
12          <div class="swiper-wrapper2">
13            <div class="swiper-slide2"><img src="" alt="Swiper01"></div>
14            <div class="swiper-slide2"><img src="" alt="Swiper02"></div>
15            <div class="swiper-slide2"><img src="" alt="Swiper03"></div>
16            <div class="swiper-slide2"><img src="" alt="Swiper04"></div>
17          </div>
18          <div class="swiper-pagination"></div>
19        </div>

javascript
1<script src="dist/js/swiper.js"></script>
2          <script>
3            var swiper = new Swiper('.swiper-container', {
4              direction: 'horizontal',
5              loop: true,
6              effect: 'fade',
7              autoplay: {
8              delay: 2000,
9              speed: 4000,
10              },
11
12              pagination: {
13                el: '.swiper-pagination',
14                type: 'bullets',
15              },
16            });
17          </script>
18
19          <script>
20           var swiper2 = new Swiper('.swiper-container2', {
21        navigation: {
22          nextEl: '.swiper-button-next',
23          prevEl: '.swiper-button-prev',
24        },
25        slidesPerView: 3,
26        spaceBetween: 0,
27        initialSlide: 2,
28        loop: true,    
29      });
30
31          </script>

css
1//swiper.css
2/*下記のように.swiper-container,.swiper-wrapper,swiper-slideを複製し、2を作りました。*/
3.swiper-container {
4  margin: 0 auto;
5  position: relative;
6  overflow: hidden;
7  list-style: none;
8  padding: 0;
9  max-width: 100%;
10  width:2877px;
11  height: auto;
12  /* Fix of Webkit flickering */
13  z-index: 1;
14
15
16}
17.swiper-container2 {
18  margin: 0 auto;
19  position: relative;
20  overflow: hidden;
21  list-style: none;
22  padding: 0;
23
24  /* Fix of Webkit flickering */
25  z-index: 1;
26
27
28}
29.swiper-container-no-flexbox .swiper-slide {
30  float: left;
31}
32.swiper-container-vertical > .swiper-wrapper {
33  -webkit-box-orient: vertical;
34  -webkit-box-direction: normal;
35  -webkit-flex-direction: column;
36  -ms-flex-direction: column;
37  flex-direction: column;
38}
39.swiper-container-vertical > .swiper-wrapper2 {
40  -webkit-box-orient: vertical;
41  -webkit-box-direction: normal;
42  -webkit-flex-direction: column;
43  -ms-flex-direction: column;
44  flex-direction: column;
45}
46.swiper-wrapper {
47  position: relative;
48  width: 100%;
49  height: 100%;
50  z-index: 1;
51  display: -webkit-box;
52  display: -webkit-flex;
53  display: -ms-flexbox;
54  display: flex;
55  -webkit-transition-property: -webkit-transform;
56  transition-property: -webkit-transform;
57  -o-transition-property: transform;
58  transition-property: transform;
59  transition-property: transform, -webkit-transform;
60  -webkit-box-sizing: content-box;
61  box-sizing: content-box;
62}
63
64.swiper-wrapper2 {
65  position: relative;
66  width: 100%;
67  height: 100%;
68  z-index: 1;
69  display: -webkit-box;
70  display: -webkit-flex;
71  display: -ms-flexbox;
72  display: flex;
73  -webkit-transition-property: -webkit-transform;
74  transition-property: -webkit-transform;
75  -o-transition-property: transform;
76  transition-property: transform;
77  transition-property: transform, -webkit-transform;
78  -webkit-box-sizing: content-box;
79  box-sizing: content-box;
80}
81
82...
83
84.swiper-slide {
85  -webkit-flex-shrink: 0;
86  -ms-flex-negative: 0;
87  flex-shrink: 0;
88  width: 100%;
89  height: 100%;
90  position: relative;
91  -webkit-transition-property: -webkit-transform;
92  transition-property: -webkit-transform;
93  -o-transition-property: transform;
94  transition-property: transform;
95  transition-property: transform, -webkit-transform;
96}
97
98.swiper-slide2 {
99  -webkit-flex-shrink: 0;
100  -ms-flex-negative: 0;
101  flex-shrink: 0;
102  width: 100%;
103  height: 100%;
104  position: relative;
105  -webkit-transition-property: -webkit-transform;
106  transition-property: -webkit-transform;
107  -o-transition-property: transform;
108  transition-property: transform;
109  transition-property: transform, -webkit-transform;
110}
111
112...

試したこと

上記のソースコードのように、class名を変更して、swiper.cssに対しても必要と思われるプロパティを追記しました。

しかし、2つ同時に正常に動作はしませんでした。
どの点が問題があるかご教授いただきたいです。
どうぞよろしくお願いいたします。

また、関係しそうな一部のコードしか載せていないため、その他のコードも必要な場合はおっしゃてください。よろしくお願いいたします。

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

回答1件

ベストアンサー

不具合というのは具体的にどういった内容でしょうか？
0. 見た目が崩れるなどスタイルの問題
0. prev, nextなどをクリックすると2つ一緒に動くなど、機能的な問題

投稿2019/05/15 16:30

uemaSR

総合スコア257

entd270

2019/05/15 16:36

ご回答ありがとうございます。スタイルが崩れます。上記のコードだと、1つ目のスライダーは正常に表示され、機能するのですが、2つ目のスライダーは、そもそも、スライダーにもならず、1枚目に設定されている画像が表示されるだけです。矢印なども表示されません。

uemaSR

2019/05/16 05:50 編集

2つ目の矢印が出ない件についてはわかりました。 jsで書いてある、.swiper-button-nextと.swiper-button-prevがhtml側に書かれてません。 2つ目で、ページネーションを使わないのであれば、.swiper-paginationの代わりに下記のようにナビゲーションを置いてみてください。 <div class="swiper-container2"> <div class="swiper-wrapper2"> <div class="swiper-slide2"><img src="" alt="Swiper01"></div> <div class="swiper-slide2"><img src="" alt="Swiper02"></div> <div class="swiper-slide2"><img src="" alt="Swiper03"></div> <div class="swiper-slide2"><img src="" alt="Swiper04"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> また、cssを複製して書く事は複雑さが増して原因がわかりにくくなると思いますので、コンテナをマルチクラスにして、マルチクラスの方で発火させるようにするといいと思います。 ■html <div class="swiper-container swiper-bullet"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="" alt="Swiper01"></div> <div class="swiper-slide"><img src="" alt="Swiper02"></div> <div class="swiper-slide"><img src="" alt="Swiper03"></div> </div> <div class="swiper-pagination"></div> </div> <div class="swiper-container swiper-view3"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="" alt="Swiper01"></div> <div class="swiper-slide"><img src="" alt="Swiper02"></div> <div class="swiper-slide"><img src="" alt="Swiper03"></div> <div class="swiper-slide"><img src="" alt="Swiper04"></div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> ■js <script> var swiper = new Swiper('.swiper-bullet', { direction: 'horizontal', loop: true, effect: 'fade', autoplay: { delay: 2000, speed: 4000 }, pagination: { el: '.swiper-pagination', type: 'bullets' } }); var swiper2 = new Swiper('.swiper-view3', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, slidesPerView: 3, spaceBetween: 0, initialSlide: 2, loop: true }); </script>

entd270

2019/05/16 17:14

ご返信が遅れてしまい申し訳ございません。マルチクラスにするという発想は出てきませんでした... おっしゃる通りにやったところ、思い通りに完璧に実装できました！感動しました。。。非常にわかりやすくご説明していただき、本当にありがとうございました。

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