一个页面多个Swiper轮播控制混乱的问题

废话不多说

HTML代码部分

<!-- 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> 

JS代码部分

<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', {  
    autoplay:true,  
     pagination: {
        el: '.swp2',
     },  
    direction: 'vertical',  
    slidesPerView: 1,  
    paginationClickable: true,  
    spaceBetween: 0,  
    mousewheelControl: true  
});  
</script>

完美解决一个页面多个控制器控制错乱的bug.以区分class类名的方式控制不同的swiper容器