第一个轮播图写法：
最外层盒子一定要加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
