vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片;通过查各种资料,实现了,故在此记录下来
下面我们来看下实现步骤:
- 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css
- 第二部:写入dom结构
第三步:在项目中使用npm安装swiper模块
npminstallswiper--save-dev
JS中文网-前端进阶资源教程www.javascriptC.com一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容
第四步:在vue文件中引入,并初始化swiper;先引入swiper
importSwiperfrom"swiper";
注意初始化需要放入mounted钩子中哦
importSwiperfrom"swiper"; exportdefault{ data(){ return{ } }, mounted(){ varmySwiper=newSwiper(".swiper-container",{ direction:"horizontal", loop:false, slidesPerView:"auto", centeredSlides:true, spaceBetween:20, observer:true, observeParents:true }); } }
如果你的项目中,图片是从后台接口获取,那么上面的初始化可能会出问题,这个时候我们采取另外的方式初始化swiper
importSwiperfrom"swiper"; exportdefault{ data(){ return{ mySwiper:null } }, methods:{ getdata(){ promise.then(res=>{ this.pictures=res.images||[]; this.$nextTick(()=>{ this.initSwiper(); }); }); }, initSwiper(){ this.mySwiper=newSwiper(".swiper-container",{ direction:"horizontal", loop:false, slidesPerView:"auto", centeredSlides:true, spaceBetween:20, observer:true, observeParents:true }); } } }
把swiper的初始化放入vue的nextTick中执行,就解决掉问题啦
第五步:如果想获取当前滚动到哪一张图片怎么办呢
this.mySwiper.activeIndex;
使用activeIndex属性就可以获取到当前图片的索引啦。那么我们这个功能就完成啦
总结
以上所述是小编给大家介绍的vue使用swiper实现中间大两边小的轮播图效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。