原文链接：https://www.3mooc.com/front/articleinfo/182
vue-awesome-swiper是基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。
1. npm下载
npm install vue-awesome-swiper --save
2. 引入
全局引入(main.js中)
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
组件方式引入
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
3.使用
<swiper :options="swiperOption">
<swiper-slide><img src="static/images/1.jpg"></swiper-slide>
<swiper-slide><img src="static/images/2.jpg"></swiper-slide>
<swiper-slide><img src="static/images/3.jpg"></swiper-slide>
<swiper-slide><img src="static/images/4.jpg"></swiper-slide>
<swiper-slide><img src="static/images/5.jpg"></swiper-slide>
<swiper-slide><img src="static/images/6.jpg"></swiper-slide>
</swiper>
<!--以下看需要添加-->
<div class="swiper-scrollbar"></div> //滚动条
<div class="swiper-button-next"></div> //下一项
<div class="swiper-button-prev"></div> //上一项
<div class="swiper-pagination"></div> //标页码
data(){
return{
swiperOption: {
autoplay: 3000,
speed: 1000,
}
}
}
其他配置API大家可以去看一下swiper4。
