轮播图—同时显示4个小轮播图,切换时一次切换4张
默认一个div中一个图
想一次
显示并且切换4张图,就在一个div中写4张图
html:
<div class="swiper swiperOne">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/banner1.jpg" alt="">
<img src="./images/banner2.jpg" alt="">
<img src="./images/banner3.jpg" alt="">
<img src="./images/banner4.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="./images/banner2.jpg" alt="">
<img src="./images/banner4.jpg" alt="">
<img src="./images/banner4.jpg" alt="">
<img src="./images/banner1.jpg" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
如果图片之间有空隙,将图片
swiperOne img{
display:block;
float:left
width:25%;
height:100%
}