swiperを使用したスライダーの実装方法

前提・実現したいこと

swiperを使用して１ページにスライダーを３つ表示して各スライダーの画像を変更する方法
ここに質問の内容を詳しく書いてください。

swiperで１ページ内にスライダー３つ表示させてそれぞれのスライダーの中身の画像を変えた実装したいのですがうまくいかないです。

発生している問題・エラーメッセージ

2つ目と3つ目のスライダーがレイアウトが崩れてしまう。

エラーメッセージ

該当のソースコード

-HTML-
<div class="swiper-container">
            <h2>Home page<i class="fas fa-desktop"></i></h2>
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">

          <!-- Slides -->
          <div class="swiper-slide">Slide1</div>

          <div class="swiper-slide">Slide2</div>

          <div class="swiper-slide">Slide3</div>
          <div class="swiper-slide">Slide4</div>

          </div>
          <!-- ページネーション -->
          <div class="swiper-pagination"></div>

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

          <!-- スクロールバー -->
          <div class="swiper-scrollbar"></div>

          </div>

<div class="swiper-container2">
            <h2>App<i class="fas fa-desktop"></i></h2>
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper2">

          <!-- Slides -->
          <div class="swiper-slide2">Slide1</div>

          <div class="swiper-slide2">Slide2</div>

          <div class="swiper-slide2">Slide3</div>
          <div class="swiper-slide2">Slide4</div>

          </div>
          <!-- ページネーション -->
          <div class="swiper-pagination2"></div>

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

          <!-- スクロールバー -->
          <div class="swiper-scrollbar2"></div>

          </div>

<div class="swiper-container3">
            <h2>Home page<i class="fas fa-desktop"></i></h2>
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper3">

          <!-- Slides -->
          <div class="swiper-slide3">Slide1</div>

          <div class="swiper-slide3">Slide2</div>

          <div class="swiper-slide3">Slide3</div>
          <div class="swiper-slide3">Slide4</div>

          </div>
          <!-- ページネーション -->
          <div class="swiper-pagination3"></div>

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

          <!-- スクロールバー -->
          <div class="swiper-scrollbar3"></div>

          </div>


-css-
.swiper-button-prev{
  padding: 100px 0;

}
.swiper-button-next{
  padding: 100px 0;
}
.swiper-container {
	width: 100%;
	height: 100%;
  text-align: center;
}

.swiper-wrapper {
	width: 100%;
	height: 250px;
}
.swiper-slide {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
.swiper-slide:nth-child(4n+1) {
  background-image: url(../img/header3.png);
  background-size:cover;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide:nth-child(4n+2) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide:nth-child(4n+3) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide:nth-child(4n+4) {
  background-image: url(../img/header3.png);
  background-size:cover;
}

.swiper-button-prev2{
  padding: 100px 0;

}
.swiper-button-next2{
  padding: 100px 0;
}
.swiper-container2 {
	width: 100%;
	height: 100%;
  text-align: center;
}

.swiper-wrapper2 {
	width: 100%;
	height: 250px;
}
.swiper-slide2 {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
.swiper-slide2:nth-child(4n+1) {
  background-image: url(../img/header3.png);
  background-size:cover;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide2:nth-child(4n+2) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slid2e:nth-child(4n+3) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide2:nth-child(4n+4) {
  background-image: url(../img/header3.png);
  background-size:cover;
}

.swiper-button-prev3{
  padding: 100px 0;

}
.swiper-button-next3{
  padding: 100px 0;
}
.swiper-container3 {
	width: 100%;
	height: 100%;
  text-align: center;
}

.swiper-wrapper3 {
	width: 100%;
	height: 250px;
}
.swiper-slide3 {
	color: #ffffff;
	width: 100%;
	height: 100%;
	text-align: center;
	line-height: 250px;
}
.swiper-slide3:nth-child(4n+1) {
  background-image: url(../img/header3.png);
  background-size:cover;
}
/* 4の倍数＋2枚目のスライドのスタイル（2枚目、6枚目…） */
.swiper-slide3:nth-child(4n+2) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋3枚目のスライドのスタイル（3枚目、7枚目…） */
.swiper-slide3:nth-child(4n+3) {
  background-image: url(../img/header.png);
  background-size:cover;
}
/* 4の倍数＋4枚目のスライドのスタイル（4枚目、8枚目…） */
.swiper-slide3:nth-child(4n+4) {
  background-image: url(../img/header3.png);
  background-size:cover;
}

-JavaScript-
var mySwiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  slidesPerView: 3,
  autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	}
});

var mySwiper = new Swiper('.swiper-container2', {
  effect: 'coverflow',
  slidesPerView: 3,
  autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next2',
		prevEl: '.swiper-button-prev2'
	},
	pagination: {
		el: '.swiper-pagination2',
		type: 'bullets',
		clickable: true
	}
});

var mySwiper = new Swiper('.swiper-container3', {
  effect: 'coverflow',
  slidesPerView: 3,
  autoplay: {
		delay: 3000,
		stopOnLastSlide: false,
		disableOnInteraction: false,
		reverseDirection: false
	},
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next3',
		prevEl: '.swiper-button-prev3'
	},
	pagination: {
		el: '.swiper-pagination3',
		type: 'bullets',
		clickable: true
	}
});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

uemaSR

2019/06/08 03:16

こんにちは。 htmlにスライダーが1つしかないですが、同じものを3つ置きたい感じですか？また、うまくいかないとは下記のどちらですか？ 1. 見た目が崩れるスタイルの問題 2. 3つとも同時に動作する、1つしか動かないなど機能的な問題

kei344

2019/06/09 14:04

（質問文は編集できます）質問文の JavaScript / HTML / CSS はそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

YutoYamada

2019/06/10 04:15

uemaSR様ご連絡いただきありがとうございます。１の見た目が崩れるスタイルの問題となります。

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

回答1件

ベストアンサー

連番を付けて複製をすると、swiperに付属しているcssが効かなくなります。
複製をする場合は、マルチクラスにして、デフォルトのスタイルを保ったまま、追加・上書きしていくイメージです。
2の方だけ書きますね。3も同じ感じでいいと思います。

<div class="swiper-container swiper-2">
  <h2>App<i class="fas fa-desktop"></i></h2>

  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</div>
    <div class="swiper-slide">Slide4</div>
  </div>

  <!-- ページネーション -->
  <div class="swiper-pagination pagenation-2"></div>

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

  <!-- スクロールバー -->
  <div class="swiper-scrollbar bar-2"></div>
</div>

jsもマルチクラスの方で発火できます。

var mySwiper = new Swiper('.swiper-2', {
  effect: 'coverflow',
  slidesPerView: 3,
  autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        reverseDirection: false
    },
    loop: true,
    navigation: {
        nextEl: '.next-2',
        prevEl: '.prev-2'
    },
    pagination: {
        el: '.pagination-2',
        type: 'bullets',
        clickable: true
    }
});

投稿2019/06/11 01:40

uemaSR

総合スコア257