好资源导航 » 文章资讯 » vue使用swiper实现中间大两边小的轮播图效果

vue使用swiper实现中间大两边小的轮播图效果

2023-08-07 12:50:09 57

项目中使用的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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue使用swiper实现中间大两边小的轮播图效果

热门推荐

随机推荐