原文鏈接：https://www.3mooc.com/front/articleinfo/182
vue-awesome-swiper是基于 Swiper4、適用于 Vue 的輪播組件，支持服務(wù)端渲染和單頁應(yīng)用。
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>?//滾動(dòng)條
<div?class="swiper-button-next"></div>?//下一項(xiàng)
<div?class="swiper-button-prev"></div>?//上一項(xiàng)
<div?class="swiper-pagination"></div>?//標(biāo)頁碼
data(){
????return{
????????swiperOption:?{
????????????autoplay:?3000,
????????????speed:?1000,
????????}
????}
}
其他配置API大家可以去看一下swiper4。
