YutoYamada score 11
2019/06/10 13:14 投稿
swiperを使用したスライダーの実装方法 |
### 前提・実現したいこと |
swiperを使用して1ページにスライダーを3つ表示して各スライダーの画像を変更する方法 |
ここに質問の内容を詳しく書いてください。 |
swiperで1ページ内にスライダー3つ表示させてそれぞれのスライダーの中身の画像を変えた実装したいのですがうまくいかないです。 |
### 発生している問題・エラーメッセージ |
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/ツールのバージョンなど) |
ここにより詳細な情報を記載してください。 |
YutoYamada score 11
2019/06/10 13:13 投稿
swiperを使用したスライダーの実装方法 |
### 前提・実現したいこと |
ここに質問の内容を詳しく書いてください。 |
swiperで1ページ内にスライダー3つ表示させたいのですがうまくいかないため、エラーの修正方法またはどこをいじってコピー&ペーストすれば3つ表示できるかをおしえていただきたいです。 |
swiperで1ページ内にスライダー3つ表示させてそれぞれのスライダーの中身の画像を変えた実装したいのですがうまくいかないです。 |
### 発生している問題・エラーメッセージ |
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/ツールのバージョンなど) |
ここにより詳細な情報を記載してください。 |