質問編集履歴

2 コードの修正

YutoYamada

YutoYamada score 11

2019/06/10 13:14  投稿
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
  • JavaScript

    33687 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
1 コードの修正

YutoYamada

YutoYamada score 11

2019/06/10 13:13  投稿
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/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
  • JavaScript

    33687 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る