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

<!-- Swiper -->
  <div class="swiper-container swiper1">  <!--自定义新增class:swiper1 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 swp1"></div>  <!--自定义新增class:swp1 js代码中使用类名-->
    </div>  
    <div class="swiper-container swiper2">  <!--自定义新增class:swiper2 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 swp2"></div>  <!--自定义新增class:swp2 js代码中使用类名-->
    </div>  

<script type="text/javascript">
var swiper = new Swiper('.swiper1', { 
	autoplay:true, 
    pagination: {
        el: '.swp1',
    },    
	effect : 'coverflow',
	slidesPerView: 3,
	centeredSlides: true,
	coverflowEffect: {
	rotate: 30,
	stretch: 10,
	depth: 60,
	modifier: 2,
	slideShadows : true
	},
});   
var swiper2 = new Swiper('.swiper2', {  
 slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swp2',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
});  
</script>

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

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

var swiper = new Swiper('.swiper1',{});  
var swiper2 = new Swiper('.swiper2',{});
然后就是更改pagination的默认值用以区别显示的页面控件

pagination:{el:'.swp1',''},
 
pagination: {el:'.swp2',''},
这就是基本的修改方式，值得一提的是swiper在使用中不予bootstrap冲突