vue-awesome-swiper(轮播图vue插件)
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.具体代码
.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;
}
【vue-awesome-swiper(轮播图vue插件)】