vue-awesome-swiper自定义分页器样式
使用方法:https://www.npmjs.com/package/vue-awesome-swiper安装并注册(全局or组件内)<template><swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"><!-- slides -->...
·
使用方法:https://www.npmjs.com/package/vue-awesome-swiper
安装并注册(全局or组件内)
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: 'DetailSwiper',
components: {
swiper,
swiperSlide
},
data() {
return {
swiperOption: {
autoplay: true,
loop: true,
// 分页器
pagination: {
el: '.swiper-pagination',
bulletClass: 'my-bullet',
bulletActiveClass: 'my-bullet-active'
}
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
}
</script>
<style lang="scss">
.my-bullet{
width: 0.1rem;
height: 0.1rem;
display: inline-block;
border-radius: 50%;
background: #B7B6B9;
&:nth-child(2){
margin: 0 0.1rem;
}
}
.my-bullet-active{
background: #FD882E;
}
</style>
在分页器pagination中的bulletClass和bulletActiveClass分别是分页器默认及选中时的样式。
或者你可以将pagination设置type属性为custom,然后通过renderCustom方法去自定义分页器。
更多推荐
已为社区贡献1条内容
所有评论(0)