swiperを使ってスライド設定をしているのですが、クライアントから
『最初のページと最後のページでのみクリックできない方の矢印を非表示にしたい』との
希望があって、修正箇所とその記述方法を探しています。
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js
と
https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css
をデフォルトのまま使ってHTMLのページ内には
---HTML記載箇所----
<div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img src="img/img01.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img02.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img03.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img04.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img05.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img06.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img07.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img08.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img09.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img10.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img11.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img12.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img13.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img14.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img15.png" width="600" height="851" alt=""/></div> <div class="swiper-slide"><img src="img/img16.png" width="600" height="851" alt=""/></div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <div class="swiper-button-prev"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"> <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" /> </svg> </div><!-- .swiper-button-prev --> <div class="swiper-button-next"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44"> <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" /> </svg> </div><!-- .swiper-button-next --> </div>
----スクリプト対応箇所の記述----
<script> var mySwiper = new Swiper ('.swiper-container', { loop: false, slidesPerView: 1, spaceBetween: 10, centeredSlides : true, pagination: '.swiper-pagination', dynamicBullets: true , nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 767: { slidesPerView: 1, spaceBetween: 0 } } }) </script>
の記述を行っていますがどこをどう直すべきか、お分かりになりますでしょうか?
デフォルトの設定ですでに最初のページと最後のページは矢印が透過された状態になっているので
これが非表示になれば問題ないのですが・・・。
回答1件
あなたの回答
tips
プレビュー