//dom
<div class="swiper-pagination" slot="pagination"></div>
//引用
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination} from 'swiper'; // 这行代码很关键
Swiper2.use([Navigation, Pagination]); // 这行代码很关键
// 样式
.swiper-container /deep/ .swiper-pagination-bullet{
background: red;
height: 10px;
width: 10px;
opacity: 1;
}
.swiper-container /deep/ .swiper-pagination-bullet-active{
background-color: #ffffff;
}
全部代码
<template>
<!-- <div class="commodity">
<div class="container"> -->
<swiper ref="mySwiper" id="parent" :options="swiperOptions">
<swiper-slide v-for="(item, index) in commodity" :data-index="index" :key="index">
<img class='swiImg' :src='item' />
</swiper-slide>
<!-- //滚动条 -->
<!-- <div class="swiper-scrollbar" ></div> -->
<!-- //下一页 -->
<div class="swiper-button-next" @click="slideNext()" slot="button-next"></div>
<!-- //上一页 -->
<div class="swiper-button-prev" @click="slidePrev()" slot="button-prev"></div>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- <span class='swiText' v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span> -->
<!-- </div>
</div> -->
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
import 'swiper/swiper-bundle.css'
import Swiper2, {Navigation, Pagination} from 'swiper';
Swiper2.use([Navigation, Pagination]);
export default {
data() {
const that = this;
return {
commodity: [
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
],
imgIndex: 1,
swiperOptions: {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// Some Swiper option/callback...
}
}
},
components: {
Swiper,
SwiperSlide
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
// this.swiper.slideTo(3, 1000, false)
},
methods: {
slideNext() {
this.swiper.slideNext()
},
slidePrev() {
this.swiper.slidePrev()
},
}
}
</script>
<style lang="less" scoped>
.swiImg {
width: 100%;
height: 400px;
}
.item {
width: 10px;
height: 10px;
background: red;
}
.swiper-container {
// --swiper-theme-color: #ff6600;
// --swiper-pagination-color: #00ff33; /* 两种都可以 */
}
.swiper-container /deep/ .swiper-pagination-bullet{
background: red;
height: 10px;
width: 10px;
opacity: 1;
}
.swiper-container /deep/ .swiper-pagination-bullet-active{
background-color: #ffffff;
}
</style>
