如何在一个页面用多个swiper插件

在编写移动web前端页面时,发现公司的原代码引用沉重杂乱,因此才找到了swiper这款强大的移动web前端js插件。下面就是在学习及使用过程中的碰到的问题和解决方法。。
百度搜索的答案也存在bug,下面是我更改完的攻略

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