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

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

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

页面代码：

 <div class="swiper-container hidden-xs swiper-container1">
         <div class="swiper-wrapper">
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);">div>
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);">div>
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/business1.png);">div>
         div>
         <div class="swiper-pagination swiper-p1">div>
     div>
     <div class="swiper-container visible-xs-block swiper-container2">
         <div style="height:51px;"> div>
         <div class="swiper-wrapper">
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);">div>
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);">div>
             <div class="swiper-slide lwc-imghandle" style="background-image:url(__IMG__/HtmlTemplate/index0-mob.jpg);">div>
         div>
         <div class="swiper-pagination swiper-p2">div>
     div>

控制脚本：

 var swiper = new Swiper('.swiper-container1', {
     pagination: '.swiper-p1',
     direction: 'vertical',
     slidesPerView: 1,
     paginationClickable: true,
     spaceBetween: 0,
     mousewheelControl: true
 });

 var swiper2 = new Swiper('.swiper-container2', {
     pagination: '.swiper-p2',
     direction: 'vertical',
     slidesPerView: 1,
     paginationClickable: true,
     spaceBetween: 0,
     mousewheelControl: true
 });