swiper——单页面多轮播插件冲突解决方案

第一个轮播图写法：最外层盒子一定要加swiper-container，之后在新写一类用来区分两个轮播图，在swiper-pagination也就是小圆点的位置添加一个属性名，样式要定义在你新建的类名上面 

                        <!-- 轮播图 -->
                        <div class="swiper-container swiperone">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"></div>
                                <div class="swiper-slide swiper-two">
                                    <img src="./image/zd-project01/矩形 584 拷贝.png" alt="">
                                    <h1>精准预约</h1>
                                    <p>基于大数据精确测算不同专科、不同专家
                                        接诊时间，实现科室号源预约时段精确到
                                        30分钟以内，并基于智能分诊知识库，为
                                        患者提供智能在线分诊推荐。</p>
                                </div>
                                <div class="swiper-slide"></div>
                            </div>
                            <!-- Add Pagination -->
                        </div>
                        <div class="next swiper-pagination"></div>

第二张同理：

                        <div class="swiper-container swipertwo">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"></div>
                                <div class="swiper-slide swiper-two">
                                    <img src="./image/zd-project01/矩形 584 拷贝.png" alt="">
                                    <h1>精准预约</h1>
                                    <p>基于大数据精确测算不同专科、不同专家
                                        接诊时间，实现科室号源预约时段精确到
                                        30分钟以内，并基于智能分诊知识库，为
                                        患者提供智能在线分诊推荐。</p>
                                </div>
                                <div class="swiper-slide"></div>
                            </div>
                            <!-- Add Pagination -->
                        </div>
                        <div class="next2 swiper-pagination"></div>

样式的话用轮播二来举例：样式前缀为你新添加的样式名称

/* !轮播二 */
.swipertwo {
    width: 100%;
    height: 5.5rem;
    margin: .46rem auto;
    overflow: hidden;
}
.swipertwo .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    transform: scale(0.8) !important;
    transition: all .5s;
}
.swipertwo .swiper-slide:nth-child(1) {
    background-image: url(../image/zd-project01/3.png);
    background-size: 100% 100%;
}
.swipertwo .swiper-slide-active,
.swipertwo .swiper-slide-duplicate-active {
    transform: scale(1) !important;
}

.swipertwo .swiper-slide:nth-child(2n) {
    width: 5.5rem;

}

.swipertwo .swiper-slide:nth-child(3) {
    width: 5.5rem;
    background: url(../image/zd-project01/2.png);
    background-size: 100% 100%;
}

.next2{
    top: -.3rem !important;
    position: relative !important;
}

.next2 .swiper-pagination-bullet {
    width: .3rem !important;
    height: .08rem !important;
    border-radius: .04rem !important;
    margin-left: .08rem !important;
    background: #0D80DD;
}

.next2 .swiper-pagination-bullet-active {
    width: .3rem;
    height: .08rem;
    border-radius: .04rem;
    background: #0D80DD;
}

swiper.js部分：把需要替换的轮播图名称和列表项替换即可

        var swiper = new Swiper('.swiperone', {
            pagination: '.next',
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            initialSlide: 1,//默认第二个
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 5, observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            // noSwiping: true, //设置为true时禁止切换
            slideToClickedSlide: true,
        });
        var swiper2 = new Swiper('.swipertwo', {
            pagination: '.next2',
            slidesPerView: 2,
            observer: true,
            observeParents: true,
            initialSlide: 2,//默认第二个
            centeredSlides: true,
            paginationClickable: true,
            spaceBetween: 5, observer: true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents: true,//修改swiper的父元素时，自动初始化swiper
            // noSwiping: true, //设置为true时禁止切换
            slideToClickedSlide: true,
        });

最后一点，要在js添加以下两行代码

observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper