vue-awesome-swiper的用法

最新推荐文章于 2024-08-13 08:31:39 发布

前端的小刘老师

最新推荐文章于 2024-08-13 08:31:39 发布

阅读量1.1k

点赞数 4

文章标签： vue 轮播图 swiper vue-awesome-swiper

本文链接：https://blog.csdn.net/weixin_44489221/article/details/86304306

版权

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

安装

npm install vue-awesome-swiper --save

引入

/*全局引入*/
    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
	    }
	}

使用

<swiper :options="swiperOption" ref="mySwiper">
     <!-- slides -->
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <swiper-slide>I'm Slide 4</swiper-slide>
      
      <!-- Optional controls以下按需使用 -->
      <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
}