用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组件，并且可以监听手势滑动事件，展示过渡效果