1.安装：npm install vue-awesome-swiper --save
2.在main.js里面引入
// 引入轮播图插件
import Vue from 'vue'
import vueSwiper from 'vue-awesome-swiper'
/* 样式的话，我这里有用到分页器，就在全局中引入了样式 */
import 'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
3.在具体页面引入
import HelloWorld from ‘@/HelloWorld’
在Vue实例对象里面注册组件 componts:{
HelloWorld
}
4.具体代码
<template>
<swiper :options="SwiperOptions">
<swiper-slide v-for="(item,index) of commodity" :key="'commodity' + index ">
<div style="height:100px">
<img src=item />
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
SwiperOptions: {//滚动页配置
autoplay: {//自动滚动配置
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false
},
slidesPerView: "auto",//一页显示几个
freeMode: true,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
pagination: { //指示器配置
el: ".swiper-pagination"
}
},
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/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"
]
};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 修改指示器属性 -->
<style scoped>
.swiper-pagination-bullet-active {
opacity: 1;
background: #aeaeae !important;
}
.swiper-pagination-bullet {
width: 4px !important;
height: 4px !important;
display: inline-block;
border-radius: 100%;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: -2px;
}
</style>
