如何使用Swiper在同一个页面上多个轮播组件

之前在公司是做后端的，现在回家这N线城市里的小公司什么都要自己来 ，年轻就多学学吧~~~~~

现在切入正题~~~这几天写前台的页面发现Swiper非常强大，公司项目又要求弄成响应式的所以项目里有整合 Bootstrap，Swiper目前在用的过程中没有发现和Bootstrap有冲突，但是在其中的一个页面需要多个轮播组件。所以直接上代码吧

页面代码：

[html]  view plain  copy

1. <div class="swiper-container hidden-xs swiper-container1">  
2.         <div class="swiper-wrapper">  
3.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>  
4.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>  
5.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);"></div>  
6.         </div>  
7.         <div class="swiper-pagination swiper-p1"></div>  
8.     </div>  
9.     <div class="swiper-container visible-xs-block swiper-container2">  
10.         <div style="height:51px;"> </div>  
11.         <div class="swiper-wrapper">  
12.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>  
13.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>  
14.             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);"></div>  
15.         </div>  
16.         <div class="swiper-pagination swiper-p2"></div>  
17.     </div>  

控制脚本：

[javascript]  view plain  copy

1. var swiper = new Swiper('.swiper-container1', {  
2.     pagination: '.swiper-p1',  
3.     direction: 'vertical',  
4.     slidesPerView: 1,  
5.     paginationClickable: true,  
6.     spaceBetween: 0,  
7.     mousewheelControl: true  
8. });  
9.   
10. var swiper2 = new Swiper('.swiper-container2', {  
11.     pagination: '.swiper-p2',  
12.     direction: 'vertical',  
13.     slidesPerView: 1,  
14.     paginationClickable: true,  
15.     spaceBetween: 0,  
16.     mousewheelControl: true  
17. });