Swiper.js默认插件提供了多种切换效果，其中creativeEffect创意切换效果参数多，可自定义性强，可以实现多种3D视觉的轮播切换，比如圆弧旋转木马轮播效果。

HTML代码：

<div class="arclist">
    <div class="swiper">
        <div class="swiper-wrapper">
            <article class="swiper-slide">
                <div class="info">
                    <!--内容-->
                </div>
            </article>
            <article class="swiper-slide">
                <div class="info">
                    <!--内容-->
                </div>
            </article>
            <article class="swiper-slide">
                <div class="info">
                    <!--内容-->
                </div>
            </article>
        </div>
        <div class="arrows prev"></div>
        <div class="arrows next"></div>
    </div>
</div>

CSS代码：

html {
    font-size:100px;
}

.arclist {
    position: relative;
    overflow: hidden;
    .swiper {
        width: 6.8rem;
        overflow: visible;
    }
    .swiper-slide {
        box-shadow: 0.04rem 0.05rem 0.2rem 0px rgba(22, 47, 95, 0.1);
        border-radius: 0.12rem;
        background-color: #fff;
    }
    .info {
        padding: 0.6rem 0.55rem;
    }
    .arrow {
        background: #fff no-repeat center center;
        background-size: 16% auto;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 5;
        cursor: pointer;
        &:hover {
            background-color: #ec6c00;
        }
    }
    .prev {
        left: -0.75rem;
        background-image: url(../images/arrow_prev.svg);
    }
    .next {
        right: -0.75rem;
        background-image: url(../images/arrow_next.svg);
    }
}

JS代码：

new Swiper('.arclist .swiper', {
    slidesPerView: 1,
    speed: 500,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false
    },
    effect: 'creative',
    creativeEffect: {
        prev: {
            shadow: false,
            origin: "right center",
            translate: ['-114.7%', 0, 0],
            scale:1,
            opacity:0.5,
            rotate:[0,15,0]
        },
        next: {
            shadow: false,
            origin: "left center",
            translate: ['114.7%', 0, 0],
            scale:1,
            opacity:0.5,
            rotate:[0,-15,0]
        },       
        limitProgress:2,
    },
    loop: true,
    loopAdditionalSlides:2,
    navigation: {
        nextEl: '.arclist .next',
        prevEl: '.arclist .prev',
    }
});

提示：需要使用Swiper 7及以上版本，因为creativeEffect参数启用版本是7.0.0。