滑动触摸滑块 - 不滑动答案

【问题标题】：Swiper touch slider - Not sliding滑动触摸滑块 - 不滑动
【发布时间】：2017-03-19 04:25:04
【问题描述】：

我正在 jQuery 中创建一个 swiper。我正在使用 Swiper 触摸滑块 - 它不适用于我的主域。我唯一能想到的是另一个 JS 文件正在覆盖它？但是我删除了所有的 JS 文件，它仍然无法正常工作。这是 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>

【问题讨论】：

标签： jquery swiper

【解决方案1】：

您应该根据以下模板开发您的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>

加载缩小版 (.min.js) 或未缩小版 (.js)

在正文的最后（结束标记之前）包含 swiper 初始化脚本

您可以在此处阅读文档：http://idangero.us/swiper/get-started/#.WNsOA98xA8o

【讨论】：