vue轮播插件（vue-awesome-swiper）-来自于三人行慕课

原文链接：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。