Swiper.jsを使ってスライダーをコーディングしていますが、ページネーションボタンがスライドの外に配置できず苦戦しております。
やりたいことは、ページネーションボタンをスライドの外(下側)に配置することです。
画像はhttps://garigaricode.com/swiper_navigation/#sample4の記事から拝借いたしました。
画像を引用した先の記事を読んで書いてみましたが、同じように動作せず、スライドの中にページネーションボタンがある状態から変わりませんでした。
https://garigaricode.com/swiper_navigation/#sample4
書いているコード該当部分は以下です。
htmlとJSです。
html
1<div class="swiper-parent"> 2 <div class="swiper-container"> 3 <div class="swiper-wrapper"> 4 <div class="swiper-slide"></div> 5 <div class="swiper-slide"></div> 6 <div class="swiper-slide"></div> 7 <div class="swiper-slide"></div> 8 </div> 9 10 <div id="swiper-pagination"></div> 11 </div> 12 </div> 13 14 <!-- Swiper JS --> 15 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script> 16 17 <!-- Initialize Swiper --> 18 <script> 19 var mySwiper = new Swiper('.swiper-container', { 20 pagination: { 21 el: '.swiper-pagination', 22 type: 'bullets', 23 clickable: true 24 } 25 }); 26 </script>
CSSです。
CSS
1.swiper-parent { 2 position: relative; 3} 4 5.swiper-container { 6 width: 100%; 7 padding-bottom: 150px; 8 height: 300px; 9 box-sizing: content-box; 10} 11 12.swiper-wrapper .swiper-slide { 13 color: #fff; 14 width: 100%; 15 height: 100%; 16 text-align: center; 17 line-height: 250px; 18 padding-top: 100px; 19} 20 21#swiper-pagination{ 22 margin-bottom: -330px; 23} 24 25.swiper-slide:nth-child(4n+1) { 26 background-color: #008BBB; 27} 28 29/* 4の倍数+2枚目のスライドのスタイル(2枚目、6枚目…) */ 30.swiper-slide:nth-child(4n+2) { 31 background-color: #E13239; 32} 33/* 4の倍数+3枚目のスライドのスタイル(3枚目、7枚目…) */ 34.swiper-slide:nth-child(4n+3) { 35 background-color: #1F1762; 36} 37/* 4の倍数+4枚目のスライドのスタイル(4枚目、8枚目…) */ 38.swiper-slide:nth-child(4n+4) { 39 background-color: #BEDAE5; 40} 41
よろしくお願いいたします。

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/07 02:44
2018/10/07 03:36 編集
2018/10/07 04:43