正文

H5制作显示轮播图的方法Swiper

IP云
IP云V管理员/1 阅读
08/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

1、需要引入Swiper插件

<!-- swiper插件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.js"> </script>
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>

2、轮播图的html结构

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperImgList">
<img :src="item" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>

.swiper-pagination-bullet { // 小圆点未激活的css
background: #fff !important;
opacity: 0.5 !important;
}.swiper-pagination-bullet-active { //小圆点激活的样式
background: #fff !important;
opacity: 1 !important;
}

3、js代码如下

initSwiper() {
var mySwiper = new Swiper('.swiper-container', {
speed: 1000,
autoplay: {
delay: 3000,
disableOnInteraction: false //手动滑动后，继续自动滑动
},
pagination: {
el: '.swiper-pagination',
},
loop: true
})
},

如上。