如何使用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
});

这里也感谢下群里的前端朋友，给的指点~~本人小菜其实这样的用法官网已经有给出了（状态不好，扫一眼没注意呀！） ，人状态不好脑子容易短路呀~~~

Swiper官网演示地址： 官网横竖轮播嵌套的例子