同一ページでのスライドショーの使用

下記の2個のスライドを同一ページで使用したいです。

ただ、どちらか一方の内容しか反映されません。
追加で記入した方がよい、コードなどはございますでしょうか。

どちらにも、

html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
2```を入れております。
3
4
5
6
7
8■１個目のスライド
9
10
11```html
12
13<!-- Swiper START -->
14<div class="swiper-container">
15	<!-- メイン表示部分 -->
16	<div class="swiper-wrapper">
17		<!-- 各スライド -->
18		<div class="swiper-slide">Slide 1</div>
19		<div class="swiper-slide">Slide 2</div>
20		<div class="swiper-slide">Slide 3</div>
21		<div class="swiper-slide">Slide 4</div>
22	</div>
23	<!-- 前ページボタン -->
24	<div class="swiper-button-prev"></div>
25	<!-- 次ページボタン -->
26	<div class="swiper-button-next"></div>
27</div>
28<!-- Swiper END -->

JavaScript
1var mySwiper = new Swiper('.swiper-container', {
2	navigation: {
3		nextEl: '.swiper-button-next',
4		prevEl: '.swiper-button-prev',
5	}
6});

css
1/* 全体のスタイル */
2.swiper-wrapper {
3	width: 100%;
4	height: 250px;
5}
6/* 全スライド共通スタイル */
7.swiper-slide {
8	color: #ffffff;
9	width: 100%;
10	height: 100%;
11	text-align: center;
12	line-height: 250px;
13}
14/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
15.swiper-slide:nth-child(4n+1) {
16	background-color: #EECB27;
17}
18/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
19.swiper-slide:nth-child(4n+2) {
20	background-color: #E13239;
21}
22/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
23.swiper-slide:nth-child(4n+3) {
24	background-color: #1F1762;
25}
26/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
27.swiper-slide:nth-child(4n+4) {
28	background-color: #BEDAE5;
29}
30

■2個目のスライド

html
1<!-- Swiper START -->
2<div class="swiper-container">
3	<!-- メイン表示部分 -->
4	<div class="swiper-wrapper">
5		<!-- 各スライド -->
6		<div class="swiper-slide">Slide 1</div>
7		<div class="swiper-slide">Slide 2</div>
8		<div class="swiper-slide">Slide 3</div>
9		<div class="swiper-slide">Slide 4</div>
10	</div>
11	<div class="swiper-button-prev"></div>
12	<div class="swiper-button-next"></div>
13	<div class="swiper-pagination"></div>
14</div>
15<!-- Swiper END -->

JavaScript
1var mySwiper = new Swiper('.swiper-container', {
2	spaceBetween: 10,
3	slidesPerView: 3,
4	navigation: {
5		nextEl: '.swiper-button-next',
6		prevEl: '.swiper-button-prev'
7	},
8	pagination: {
9		el: '.swiper-pagination',
10		type: 'bullets',
11		clickable: true
12	}
13});

css
1/* 全体のスタイル */
2.swiper-wrapper {
3	width: 100%;
4	height: 250px;
5}
6/* 全スライド共通スタイル */
7.swiper-slide {
8	color: #ffffff;
9	width: 100%;
10	height: 100%;
11	text-align: center;
12	line-height: 250px;
13}
14/* 4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…） */
15.swiper-slide:nth-child(4n+1) {
16	background-color: #EECB27;
17}
18/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
19.swiper-slide:nth-child(4n+2) {
20	background-color: #E13239;
21}
22/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
23.swiper-slide:nth-child(4n+3) {
24	background-color: #1F1762;
25}
26/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
27.swiper-slide:nth-child(4n+4) {
28	background-color: #BEDAE5;
29}

kei344

2019/03/29 04:50

質問タグが「Java」になっていますが、「JavaScript」では？

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

回答1件

ベストアンサー

回答させていただきます。swiper-containerに別クラスを代入することで複数動作するようです。

HTML
1//1個目
2<div class="swiper-container s1">
3
4var mySwiper = new Swiper('.s1'
5
6
7//2個目
8<div class="swiper-container s2">
9
10var mySwiper = new Swiper('.s2'

下記のように一度に設定する方法もあるようです。

Javascript
1// すべてのswiper-containerを取得し処理
2$(".swiper-container").each(function(index, element){
3    var $this = $(this);
4    $this.swiper({
5        // your settings ...
6        nextButton: $this.find(".swiper-button-next")[0],
7        prevButton: $this.find(".swiper-button-prev")[0]
8    });
9});

[参照元] https://github.com/nolimits4web/swiper/issues/273

投稿2019/03/28 18:59

IShix

総合スコア1724

ka.sh

2019/03/29 05:12

解決できました。ありがとうございます！！

IShix

2019/03/29 06:40

解決できてよかったです。あと、大きなお世話かもしれませんがJavaとJavascriptはまったくの別言語です。元々、Javaがあってその人気にあやかりたいってことでJavascriptという名前になったという経緯だったと思います。次回からはJavascriptとし、jQueryを元にしたプラグインなのでJQueryのタグを追加すると良いと思います。Javascriptを扱う方々の中にはjQueryを使わない方も居るので、その方が親切かと思います。

IShix

2019/03/29 06:45

あとタイトルも「Swiperを利用した同一ページでの複数スライドショー」でSwiperのオフィシャルリンクも貼っていただけると回答しやすいと思います。以上です。参考になりますと幸いです。

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