Question

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

Answer 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） OR 未缩小版（.js）

在主体的最末端（在关闭标签之前）包含swiper初始化脚本

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

Swiper触摸滑块 - 不滑动

1 个答案: