求助：基于Swiper.js v7.4.1实现带缩放的奖励弧形轮播

问题背景 #

尝试用Swiper.js v7.4.1实现奖励列表弧形轮播，要求轮播项呈弧形排列，不同位置有差异化缩放效果，但现有Demo无法达到预期样式。

修改后完整代码 #

<template>
    <div id="carousel">
        <div class="swiper swiper-3d">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="img-placeholder">1</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-placeholder">2</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-placeholder">3</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-placeholder">4</div>
                </div>
                <div class="swiper-slide">
                    <div class="img-placeholder">5</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Swiper from 'swiper/swiper-bundle.min';
import 'swiper/swiper-bundle.min.css';

export default {
    mounted() {
        const slideW = 80;
        // 适配5个slide的弧形角度间隔
        const anglePerSlide = Math.PI / 5;
        const radius = (slideW / 2) / Math.sin(anglePerSlide / 2);
        // 视点距离，强化3D透视效果
        const viewDistance = 1200;

        const carouselSwiper = new Swiper('#carousel .swiper', {
            watchSlidesProgress: true,
            slidesPerView: 'auto',
            // 开启居中模式，让中间slide处于视觉核心
            centeredSlides: true,
            centeredSlidesBounds: true,
            loop: true,
            grabCursor: true,
            // 启用内置3D效果支持
            effect: 'coverflow',
            coverflowEffect: {
                rotate: 0,
                stretch: 0,
                depth: viewDistance,
                modifier: 1,
                slideShadows: false
            },
            on: {
                progress() {
                    this.slides.forEach((slideEl, index) => {
                        const slide = this.slides.eq(index);
                        const slideProgress = slideEl.progress;
                        // 计算当前slide的角度偏移
                        const currentAngle = slideProgress * anglePerSlide * 180 / Math.PI;
                        // 弧形排列的X轴偏移量
                        const translateX = Math.sin(slideProgress * anglePerSlide) * radius;
                        // Z轴深度，实现远近层次感
                        const translateZ = Math.cos(slideProgress * anglePerSlide) * radius - radius;
                        // 动态缩放：中心slide最大，两侧随距离缩小
                        const scale = 1 - Math.abs(slideProgress) * 0.3;

                        slide.transform(`
                            translateX(${translateX}px) 
                            translateZ(${translateZ}px) 
                            translateY(100px) 
                            rotateY(${currentAngle}deg) 
                            scale(${scale})
                        `);
                    });
                },
                setTransition(swiper, transition) {
                    this.slides.forEach(slide => {
                        slide.transition(transition);
                    });
                },
            },
        });
    },
};
</script>

<style lang="less">
#carousel {
    perspective: 1200px; /* 添加父容器透视，让3D变换更真实 */
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper {
    width: 80%;
    height: 300px;
}

.swiper-slide {
    width: 80px;
    height: 80px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.swiper-slide-active {
    opacity: 1; /* 激活态slide高亮显示 */
}

.img-placeholder {
    width: 100%;
    height: 100%;
    background: #f00;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border-radius: 8px;
}
</style>

关键调整说明 #

• 开启3D透视：在父容器#carousel添加perspective: 1200px，配合Swiper的coverflowEffect.depth参数，让3D变换效果更自然。
• 修正居中配置：启用centeredSlides: true，确保轮播过程中中间slide始终处于视觉中心，契合弧形轮播的视觉逻辑。
• 重构弧形计算逻辑：基于每个slide的角度间隔重新计算X/Z轴偏移，让slide自动排列成规整的弧形。
• 添加差异化缩放：根据slideProgress动态计算缩放比例，中心slide保持原尺寸，两侧slide随距离中心的远近线性缩小。
• 优化过渡动画：给swiper-slide添加统一过渡效果，让轮播切换更平滑，同时通过透明度区分激活态与非激活态slide。
• 简化变换逻辑：合并重复计算，让代码更易维护，同时确保translateZ的计算符合弧形排列的深度变化规律。

内容的提问来源于stack exchange，提问作者zhangyongjian