前提・実現したいこと
同ページに3つの別スライダーを表示させたいです。1つ目は1つずつの画像を表示させたく、2,3つめは3つのみのスライダー画像表示、ナビゲーション、ページネーションもそれぞれに表示させたいです。
1つめは、ナビゲーション、ページネーションあわせてうまく表示されました。2,3つ目はブラウザーを広げれば広げるほど、広げた幅一杯に何個も画像が表示されてしまいます。また、ナビゲーションが表示せず、ページネーションは1つのみ表示され、2,3を合わせた動きをします。
以下をリンクしております。
[JS]
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
[CSS]
swiper.min.css
swiper.css
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!--冒頭カルーセル--> <div class="swiper-container" style="height:590px;"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div> <div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div> <div class="swiper-slide"><a href=""><img src="" width="970px" /></a></div> </div> <!-- pagenation --> <div class="swiper-pagination"></div> <!-- navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 1, spaceBetween: 10, autoplay: 4000, speed: 1500, paginationClickable: true, centeredSlides : true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } }) </script> <!--/冒頭カルーセル--> <!--カテゴリーカルーセル--> <!--カルーセル01--> <div class="swiper-container2" style="width:970px;"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> </div> <!-- pagenation --> <div class="swiper-pagination"></div> <!-- navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!--カルーセル02--> <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!--カルーセル03 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> <div class="swiper-slide"><a href=""><img src="" alt="" /></a></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>--> <!-- //category --> <script> $(function(){ var swiper = new Swiper('.swiper-container2', { autoplay: 2000, loop: true, slidesPerView: 3, autoplay: 4000, speed: 1500, paginationClickable: true, centeredSlides : true, pagination: '.swiper-pagination', navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); }); </script> <!--/カテゴリーカルーセル-->
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。