swiper.jsというjavascriptのスライダーを1ページで2つ設置したいため、下記コードのように記述したところ、
どちらのスライダーもクリックして横に動かせばスライダーは正常に動くのですが、
nextButtonやprevButtonのオプションが効きません。クリックしても左右に動いてくれないです。
autoplayも効かないのですが、loopだけは効いているという状況です。
<!-- スライダー1 --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img01.png"> </div> <div class="swiper-slide"> <img src="img02.png"> </div> <div class="swiper-slide"> <img src="img03.png"> </div> <div class="swiper-slide"> <img src="img04.png"> </div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スライダー2 --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img05.png" alt=""> </div> <div class="swiper-slide"> <img src="img06.png" alt=""> </div> <div class="swiper-slide"> <img src="img07.png" alt=""> </div> <div class="swiper-slide"> <img src="img08.png" alt=""> </div> </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <script> $(function(){ var swiper = new Swiper('.swiper-container', { autoplay: 2000, loop: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev' }); }); </script>
スライダーをひとつのページで複数使う方法が知りたい。
こちらの投稿も参考に、やってみたのですが、どうも原因が違うような気がしています。
ヒントをいただけますと幸いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/26 02:40
2018/03/26 02:43