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