轮播图插件
Vue-Awesome-Swiper
地址：https://github.com/surmon-china/vue-awesome-swiper
安装：npm install vue-awesome-swiper --save
局部引入：import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default {components: {swiper,swiperSlide}}
全局引入：
import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)
使用方法：
<swiper :options="swiperOption"><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.jpg"></swiper-slide><swiper-slide><img src="static/images/jay.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> //标页码<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {data(){return {//设置属性swiperOption:{//显示分页pagination: {el: '.swiper-pagination',clickable:true},//切换模式 横屏或者竖屏// direction : 'vertical',//设置自动播放速度autoplay: {disableOnInteraction: false,delay:4000},//开启无限循环loop:true,//设置点击箭头paginationClickable :true,prevButton:'.swiper-button-prev',nextButton:'.swiper-button-next',//设置同屏显示的数量，默认为1，使用auto是随意的意思。slidesPerView:1,//开启鼠标滚轮控制Swiper切换。可设置鼠标选项，或true使用默认值。mousewheel:true ,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。// freeMode:true }}},components:{swiper,swiperSlide}
}
</script>
