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

最新推荐文章于 2025-10-10 16:56:57 发布

原创

最新推荐文章于 2025-10-10 16:56:57 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

试了网上各种方法都没用，图片是从后台异步获取的，所以轮播图初始化必须在数据获取到之后，可写在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: {
                            rotate: 0,
                            stretch: 0,
                            depth: 40,
                            modifier: 1,