vue-awesome-swiper的用法

vue框架的轮播图插件vue-awesome-swiper

1. 安装

npm install vue-awesome-swiper --save

2. 引入

/*全局引入*/
    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" ref="mySwiper">
     
      <swiper-slide>I'm Slide 1swiper-slide>
      <swiper-slide>I'm Slide 2swiper-slide>
      <swiper-slide>I'm Slide 3swiper-slide>
      <swiper-slide>I'm Slide 4swiper-slide>
      
      
      <div class="swiper-pagination "  slot="pagination">div>	
      <div class="swiper-button-prev swiper-button-black" slot="button-prev">div>   
      <div class="swiper-button-next swiper-button-black" slot="button-next">div>	
      <div class="swiper-scrollbar"   slot="scrollbar">div>		
swiper> 

data(){
	return{
		swiperOption: {
			notNextTick: true,
			//循环
			loop:true,
			//设定初始化时slide的索引
			initialSlide:0,
			//自动播放
			autoplay:true,
			// 设置轮播
			effect : 'flip',
			//滑动速度
			speed:800,
			//滑动方向
			direction : 'horizontal',
			//小手掌抓取滑动
			grabCursor : true,
			//滑动之后回调函数
			on: {
				slideChangeTransitionEnd: function(){
				   // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
				},
			},
			//左右点击
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
			//分页器设置         
			pagination: {
				el: '.swiper-pagination',
				clickable :true
			}
		}
	}
},
components: {
	swiper,
	swiperSlide
}

具体的swiper设置属性可以查看中文API文档：http://www.swiper.com.cn/api