swiper effectCoverflow setTranslate 实现，方便定制效果

swiper 库引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

swiper放入3张随机图片

<div class="swiper-container swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
            <img src="https://source.unsplash.com/random/300x400?a=12" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://source.unsplash.com/random/300x401?a=1" alt="">
        </div>
        <div class="swiper-slide">
            <img src="https://source.unsplash.com/random/300x402?a=213" alt="">
        </div>
    </div>
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<style>
* {
    margin: 0px;
    padding: 0px;
}
.swiper-container {
    width: 850px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.swiper-slide {
    width: 300px;
}
.swiper-slide img {
    width: 300px;
}
</style>

对swiper的 effectCoverflow 进行 setTranslate 方法的重写

window.onload = function () {
    new Swiper('.swiper-container', {
        loop: true,
        // speed: 1000,
        // autoplay: {
        // 	delay: 3000,
        // },
        // effect: 'coverflow',
        grabCursor: true,
        // slidesPerView: 1.8,
        centeredSlides: true,
        slidesPerView: 'auto',
        grabCursor: true,
        watchSlidesProgress: true,
        on: {
            setTranslate: function (swiper, progress) {
                const {
                    width: swiperWidth,
                    height: swiperHeight,
                    slides,
                    slidesSizesGrid
                } = swiper;
                const params = {
                    rotate: 0,
                    stretch: "-10%",
                    depth: 100,
                    modifier: 1,
                    scale: 0.7,
                    // scale: 1,
                    slideShadows: true,
                };
                const isHorizontal = swiper.isHorizontal();
                const transform = swiper.translate;
                const center = isHorizontal ? -transform + swiperWidth / 2 : -transform +
                    swiperHeight / 2;
                const rotate = isHorizontal ? params.rotate : -params.rotate;
                const translate = params.depth;
                for (i = 0; i < this.slides.length; i++) {
                    const $slideEl = slides.eq(i);
                    const slideSize = slidesSizesGrid[i];
                    const slideOffset = $slideEl[0].swiperSlideOffset;
                    const centerOffset = (center - slideOffset - slideSize / 2) / slideSize;
                    const offsetMultiplier =
                        typeof params.modifier === 'function' ?
                        params.modifier(centerOffset) :
                        centerOffset * params.modifier;
                    let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
                    let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
                    // var rotateZ = 0
                    let translateZ = -translate * Math.abs(offsetMultiplier);
                    let stretch = params.stretch;
                    // Allow percentage to make a relative stretch for responsive sliders
                    if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
                        stretch = (parseFloat(params.stretch) / 100) * slideSize;
                    }
                    let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
                    let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
                    let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier);
                    // Fix for ultra small values
                    if (Math.abs(translateX) < 0.001) translateX = 0;
                    if (Math.abs(translateY) < 0.001) translateY = 0;
                    if (Math.abs(translateZ) < 0.001) translateZ = 0;
                    if (Math.abs(rotateY) < 0.001) rotateY = 0;
                    if (Math.abs(rotateX) < 0.001) rotateX = 0;
                    if (Math.abs(scale) < 0.001) scale = 0;
                    const slideTransform =
                        `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
                    const $targetEl = $slideEl;
                    $targetEl.transform(slideTransform);
                    $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
                }
            },
            setTransition: (swiper, transition) => {
                const $transitionElements = swiper.slides;
                $transitionElements
                    .transition(transition)
                    .find(
                        '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
                    )
                    .transition(transition);
            }
        },
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}

效果实现