BLOG博客

在编写移动web前端页面时，使用swiper这款强大的移动web前端js插件可以有效的减少在编写轮播图的时间和各种问题。下面就是在学习及使用过程中的碰到的问题和解决方法。

解决办法：

html部分代码：

    <div class="swiper-container banner">

        <div class="swiper-wrapper">

            <div class="swiper-slide" ></div>

            <div class="swiper-slide" ></div>

            <div class="swiper-slide" ></div>

        </div>

        <div class="swiper-pagination banner"></div>

    </div>

    <div class="swiper-container case ">

        <div style="height:51px;"> </div>

        <div class="swiper-wrapper">

            <div class="swiper-slide" ></div>

            <div class="swiper-slide" ></div>

            <div class="swiper-slide" ></div>

        </div>

        <div class="swiper-pagination case"></div>

    </div>

js部分代码：

$(function(){

 var mySwiper = $('.banner').swiper({

    mode:'horizontal',

    loop: true,

    autoResize:true,

    pagination:'.banner .swiper-pagination',

    paginationClickable :true,

    autoplay : 3000,

 });

 var swiper = $('.case').swiper({

    pagination: '.case .swiper-pagination',

    slidesPerView: 4,

    slidesPerColumn: 2,

    paginationClickable: true,

    spaceBetween: 20

 });

})   

这就是两个不同的swiper插件在一个页面中的使用，重点在于

声明swiper变量时 加一个同级元素加以区别即

var mySwiper = $('.banner')

var swiper = $('.case')

然后就是更改pagination的默认值用以区别显示的页面控件

pagination:'.banner'

pagination: '.case',

这就是基本的修改方式，值得一提的是swiper在使用中不予bootstrap冲突