Swiper 中间大两边小滑动组件：实现手势过渡效果

Swiper 是一个非常流行的前端滑动组件，可以轻松实现各种滑动效果。要实现一个中间大两边小的效果，可以使用 Swiper 的分页模式，然后在 CSS 中设置不同的缩放比例即可。同时，可以使用 Swiper 的事件回调函数来监听手势滑动，并根据滑动方向来设置过渡效果。

下面是一个示例代码，实现了一个中间大两边小的 Swiper 组件，并监听了手势滑动事件：

HTML 代码：

<div class='swiper-container'>
    <div class='swiper-wrapper'>
        <div class='swiper-slide'>
            <img src='image1.jpg'>
        </div>
        <div class='swiper-slide'>
            <img src='image2.jpg'>
        </div>
        <div class='swiper-slide'>
            <img src='image3.jpg'>
        </div>
        <div class='swiper-slide'>
            <img src='image4.jpg'>
        </div>
        <div class='swiper-slide'>
            <img src='image5.jpg'>
        </div>
    </div>
</div>

CSS 代码：

.swiper-container {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.swiper-slide {
    width: 33.3%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.swiper-slide-active {
    transform: scale(1.2);
}
.swiper-slide-prev, .swiper-slide-next {
    transform: scale(0.8);
}

JavaScript 代码：

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    on: {
        slideChangeTransitionStart: function () {
            // 监听滑动事件
            var activeIndex = this.activeIndex;
            var previousIndex = this.previousIndex;
            if (activeIndex > previousIndex) {
                // 向左滑动
                this.slides[activeIndex].classList.add('swiper-slide-next');
                this.slides[previousIndex].classList.add('swiper-slide-prev');
            } else {
                // 向右滑动
                this.slides[activeIndex].classList.add('swiper-slide-prev');
                this.slides[previousIndex].classList.add('swiper-slide-next');
            }
        },
        slideChangeTransitionEnd: function () {
            // 清除过渡效果
            var activeIndex = this.activeIndex;
            var previousIndex = this.previousIndex;
            this.slides[activeIndex].classList.remove('swiper-slide-next');
            this.slides[activeIndex].classList.remove('swiper-slide-prev');
            this.slides[previousIndex].classList.remove('swiper-slide-next');
            this.slides[previousIndex].classList.remove('swiper-slide-prev');
        },
    },
});

在上面的代码中，我们首先定义了一个 Swiper 实例，并设置了 slidesPerView 和 spaceBetween 等参数来控制显示的数量和间距。然后，在事件回调函数中，我们监听了 slideChangeTransitionStart 和 slideChangeTransitionEnd 事件，来实现滑动事件的过渡效果。具体来说，当滑动开始时，我们判断滑动方向，并给当前和前一个 Slide 添加不同的类名，来设置不同的缩放比例。当滑动结束时，我们清除了添加的类名，以恢复原始状态。

最终效果就是一个中间大两边小的 Swiper 组件，并且可以监听手势滑动事件，展示过渡效果。