<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if="showSwiper">
<!-- slides -->
<swiper-slide v-for="item of list" :key="item.id">
<img class="swiper-img" :src="item.imgUrl">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "HomeSwiper",
props: {
list: Array
},
data (){
return{
swiperOption: {
pagination: '.swiper-pagination',
loop: true, //让轮播插件 支持 循环轮播
}
}
},
computed: {
showSwiper () {
return this.list.length;
}
}
}
</script>
<style lang="stylus" scoped>
/*'>>>' 使得具有一个穿透*/
.wrapper >>> .swiper-pagination-bullet-active
background :#fff!important
.wrapper
overflow : hidden
width : 100%
height : 0
padding-bottom : 25.32% // 控制宽高比例 自适应 总共4行代码 或者 去掉 overflow padding-bottom 设置 height:31.25%vw 但是存在浏览器兼容问题
.swiper-img
width:100%
</style>
swiper
猜你喜欢
转载自blog.csdn.net/u013131203/article/details/81002704
今日推荐
周排行