2017-03-19 6 views
0

jQueryでスワイパーを作成しています。スワイパータッチスライダーを使用して私は - 私のメインドメインでは動作していません。私が考えることができるのは、別のJSファイルがそれを上書きしていることだけです。しかし私はすべての私のJSファイルを削除し、まだ動作していません。 HERESにHTMLコードスワイパータッチスライダー - スライドしない

 <div class="device"> 
     <div class="swiper-button-next"></div> 
     <div class="swiper-button-prev"></div> 
     <div class="swiper-container" style="cursor: -webkit-grab;"> 
     <div class="swiper-wrapper" style="width: 3200px; height: 560px; transform: translate3d(-1920px, 0px, 0px); transition-duration: 0.3s;"> 
     <div class="swiper-slide swiper-slide-duplicate" style="width: 513px; height: 560px;"> 
     <div class="content-slide"> 
     <p class="title">Slide with HTML</p> 
     <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> 
     </div> 
     </div> 
     <div class="swiper-slide" style="width: 513px; height: 560px;"> <img src="images/slider1-1.png"> </div> 
     <div class="swiper-slide" style="width: 513px; height: 560px;"> <img src="images/slider1-2.png"> </div> 
     <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 513px; height: 560px;"> 
     <div class="content-slide"> 
     <p class="title">Slide with HTML</p> 
     <p>You can put any HTML inside of slide with any layout, not only images, even another Swiper!</p> 
     </div> 
     </div> 
     <div class="swiper-slide swiper-slide-duplicate" style="width: 513px; height: 560px;"> <img src="images/slider1-1.png"> </div> 
     </div> 
     </div> 
     <div class="pagination"><span class="swiper-pagination-switch"></span><span class="swiper-pagination-switch"></span><span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span></div> 
     </div> 
     <!-- Initialize Swiper --> 
     <script> 
     var swiper = new Swiper('.swiper-container', { 
     pagination: '.swiper-pagination', 
     paginationClickable: true, 
     nextButton: '.swiper-button-next', 
     prevButton: '.swiper-button-prev', 
     spaceBetween: 0 
     }); 
     </script> 

     This is the link to Swiper: 
     http://idangero.us/swiper/#.WM4Hd_krIdU 

     I also added in at the footer: 
     <script src="js/swiper.js"></script>   
     <script src="js/swiper.min.js"></script>   
     <script src="js/swiper.jquery.js"></script>  
     <script src="js/swiper.jquery.min.js"></script>     

答えて

0

次のテンプレートに従ってあなたのhtmlを開発する必要があります。

<!-- Slider main container --> 
<div class="swiper-container"> 
<!-- Additional required wrapper --> 
<div class="swiper-wrapper"> 
    <!-- Slides --> 
    <div class="swiper-slide">Slide 1</div> 
    <div class="swiper-slide">Slide 2</div> 
    <div class="swiper-slide">Slide 3</div> 
    ... 
</div> 
<!-- If we need pagination --> 
<div class="swiper-pagination"></div> 

<!-- If we need navigation buttons --> 
<div class="swiper-button-prev"></div> 
<div class="swiper-button-next"></div> 

<!-- If we need scrollbar --> 
<div class="swiper-scrollbar"></div> 
</div> 

負荷をminificatedバージョン(.min.js)OR縮小さない(.jsファイル)

本文の末尾にスワイパ初期化スクリプトを含めます(終了タグの直前)

ここでドキュメントを読むことができます:http://idangero.us/swiper/get-started/#.WNsOA98xA8o

関連する問題