轮播没有小白点
来源:7-4 Vue项目首页 - 首页轮播图

慕后端5911336
2019-06-26
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList"
: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',
data () {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
loop: true
},
swiperList: [{
id: '001',
imgUrl: 'https://imgs.qunarzz.com/sight/p0/1805/35/35d8ce88ca9b2488a3.water.jpg_256x160_1218274a.jpg'
}, {
id: '002',
imgUrl: 'https://imgs.qunarzz.com/sight/p0/201305/31/956e01092f573b9cc8d65eac.jpg_256x160_9a387fdb.jpg'
}]
}
}
}
script>
<style lang='stylus' scoped>
.wrapper >>> .swiper-pagination-bullet-active
background #fff
.wrapper
overflow hidden
width 100%
height 0
padding-bottom 31.25%
background #eee
.swiper-img
width 100%
style>
2回答
-
你的名字我知道
2019-06-30
你肯定是swiper-pagination前面的.号没加
class的.号
pagination:'.swiper-pagination'
20 -
Dell
2019-06-27
代码贴上来看下
122019-06-30
相似问题
回答 2
回答 1