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

场景：

当我们在写页面的时候，我们总会用到插件。例如轮播图，我们就会用到 Swiper 这个插件库，那么怎么在页面中使用多个 Swiper 插件呢 ？

HTML 代码：

<!-- Swiper -->
  <div class="swiper-container swiperOne">  <!--自定义新增class:swiperOne js代码中使用类名-->
        <div class="swiper-wrapper">  
            <div class="swiper-slide">Slide 1</div>
		<div class="swiper-slide">Slide 2</div>
		<div class="swiper-slide">Slide 3</div>
		<div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>  
        <div class="swiper-pagination swpOne"></div>  <!--自定义新增class:swpOne js代码中使用类名-->
    </div>  
    <div class="swiper-container swiperTwo">  <!--自定义新增class:swiperTwo js代码中使用类名-->
        <div class="swiper-wrapper">  
	    <div class="swiper-slide">Slide 1</div>
	    <div class="swiper-slide">Slide 2</div>
	    <div class="swiper-slide">Slide 3</div>
	    <div class="swiper-slide">Slide 4</div>
	    <div class="swiper-slide">Slide 5</div>
        </div>  
        <div class="swiper-pagination swpTwo"></div>  <!--自定义新增class:swpTwo js代码中使用类名-->
    </div>  

JS 代码：

<script type="text/javascript">
var swiper = new Swiper('.swiperOne', { 
	autoplay:true, 
    pagination: {
        el: '.swpOne',
    },    
	effect : 'coverflow',
	slidesPerView: 3,
	centeredSlides: true,
	coverflowEffect: {
	rotate: 30,
	stretch: 10,
	depth: 60,
	modifier: 2,
	slideShadows : true
	},
});   
var swiper2 = new Swiper('.swiperTwo', {  
    autoplay:true,  
     pagination: {
        el: '.swpTwo',
     },  
    direction: 'vertical',  
    slidesPerView: 1,  
    paginationClickable: true,  
    spaceBetween: 0,  
    mousewheelControl: true  
});  
</script>

其实，两个 Swiper 的不同点在于它 创建出来的实例对象 和它的 页面元素

声明 Swiper 变量时，加一个同级元素加以区分：

var swiper = new Swiper('.swiperOne',{})
var swiperTwo = new Swiper('.swiperTwo',{})

然后就是更改它的 pagination 的默认值，用于区分显示的页面控件：

pagination:{el:'.swpOne',''},
pagination:{el:'.swpTwo',''},