滑动触摸滑块-不滑动

Question

I'm creating a swiper in jQuery. Im using Swiper touch slider - It's not working on my main domain. Only thing I can think of is that another JS file is overriding it? But I removed all of my JS files and its still not working. Heres the HTML code

        <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>                 

Answer 1

you should develop your html according to the following template:

<!-- 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>

load the minificated version (.min.js) OR the not minified (.js)

include the swiper initialization script in the very end of body (right before closing tag)

you can read the docs here : http://idangero.us/swiper/get-started/#.WNsOA98xA8o