vue中使用swiper实现H5中间大图两边只显示一点的轮播图效果刚进入时左边图片不显示，中间图片还靠左的问题

最新推荐文章于 2024-07-27 17:28:42 发布

猫猫上将

最新推荐文章于 2024-07-27 17:28:42 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52963882/article/details/127204559

版权

本文介绍了在Vue项目中如何利用swiper解决H5轮播图问题，特别是当图片从后台异步获取时，如何确保轮播图正确初始化。通过应用coverflowEffect并调整相关参数如rotate、stretch和depth，成功实现中间大图两边只显示一点的视觉效果，同时解决了刚进入时左侧图片不显示及中间图片偏左的问题。

摘要由CSDN通过智能技术生成

试了网上各种方法都没用，图片是从后台异步获取的，所以轮播图初始化必须在数据获取到之后，可写在promise.then方法里，数据请求在mounted中调用，试了什么元素变化监听，必加属性，还有window.onload都没用，最后终于找到了一种方法：

就是用coverflowEffect

参数介绍：

rotate：slide做3d旋转时Y轴的旋转角度。默认50。

stretch：每个slide之间的拉伸值，越大slide靠得越紧。默认0。

depth：slide的位置深度。值越大z轴距离越远，看起来越小。默认100。

modifier：depth和rotate和stretch的倍率，相当于depthmodifier、rotatemodifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。

slideShadows：开启slide阴影。默认 true。

new Swiper('.swiper-culture', {
                        slidesPerView: 'auto',
                        spaceBetween: 30,
                        loop: true,
                        centeredSlides: true,
                        effect: 'coverflow',
                        coverflowEffect: {