前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー