swiper3.4.0を使用して簡単なスライダーの実装を試みています。
実装途中のものをアップしているデモサイトになります。
※この場合、750px
デモサイト
デモサイトにある、グレーのスライド部分が今回実装を試みている箇所なのですが、スライダーの下にスライドしている画像の幅の分だけ空白ができてしまいます。
以下、HTMLのソースになります。
<html> <head> <link rel="stylesheet" href="./css/swiper.css"> <script src="./js/swiper.js"></script> </head> <body> <div style="width: 360px; margin: 0 auto;"> <img src="http://placehold.it/750x250/000/FFF" width="100%" /> <div id="sliders"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://placehold.it/750x200" width="100%"> </div> <div class="swiper-slide"> <img src="http://placehold.it/750x200" width="100%"> </div> <div class="swiper-slide"> <img src="http://placehold.it/750x200" width="100%"> </div> </div> </div> </div> <img src="http://placehold.it/750x250/000/FFF" width="100%" /> </div> <script> var swiper = new Swiper('.swiper-container', { loop: true, autoplay: 500 }); </script> </body> </html>
上記参考サイトのデモページでは、スライド部分の下に空白などないのですが、なにがいけないのでしょうか??
回答2件
あなたの回答
tips
プレビュー