VUE Swiper 轮播图

npm install vue-awesome-swiper@4 swiper@5 --save-dev
组件引用
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import 'swiper/css/swiper.css'
<div class="swiper-content" @touchstart="handleStart" @touchend="handleEnd">
                <swiper ref="mySwiper" :options="swiperOptions" class="show-swiper" style="position: relative">
                    <swiper-slide>
                        <div class="swiper-item">
                            <img class="arts-header-image" src="@/assets/images/edudata-h5/syjd.webp" />
                            <div class="swiper-item-titel ml20">生源基地挂牌</div>
                            <div class="swiper-item-detail ml20">
                                借助积累的高中和高校资源，推进高校与对等高中生源基地的建设
                            </div>
                        </div>
                    </swiper-slide>
                    <swiper-slide>
                        <div class="swiper-item">
                            <img class="arts-header-image" src="@/assets/images/edudata-h5/xzlt.webp" />
                            <div class="swiper-item-titel ml20">高中校长论坛</div>
                            <div class="swiper-item-detail ml20">
                                组织高中校长、班主任到高校交流学习，加强高校与高中之间的联系
                            </div>
                        </div>
                    </swiper-slide>
                    <swiper-slide>
                        <div class="swiper-item">
                            <img class="arts-header-image" src="@/assets/images/edudata-h5/ydyx.webp" />
                            <div class="swiper-item-titel ml20">营地、研学</div>
                            <div class="swiper-item-detail ml20">
                                组织意向生源参加高校各项营地活动，深入高中开展先修课程
                            </div>
                        </div>
                    </swiper-slide>
                    <swiper-slide>
                        <div class="swiper-item">
                            <img class="arts-header-image" src="@/assets/images/edudata-h5/rxxj.webp" />
                            <div class="swiper-item-titel ml20">入校宣讲</div>
                            <div class="swiper-item-detail ml20">
                                组织高校专家到高中做前沿学术讲座、开展生涯规划指导
                            </div>
                        </div>
                    </swiper-slide>


                    <div slot="pagination" class="swiper-pagination">
                        <div ref="awiperProgress" class="swiper-pagination-progress"></div>
                    </div>
                </swiper>

data(){
return{
swiperOptions: {
                loop: false,
                speed: 300,
                slidesPerView: 'auto',
                spaceBetween: '35%',
                watchSlidesProgress: true,
                centeredSlides: true,
                // 显示分页
                pagination: {
                    el: '.swiper-pagination',
                    type: 'custom', // bullets  progressbar
                    clickable: true // 允许分页点击跳转
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false
                },

                effect: 'coverflow',
                coverflowEffect: {
                    rotate: 0,
                    stretch: 10,
                    depth: 230,
                    modifier: 2,
                    slideShadows: false
                },
                on: {
                    //   click () {
                    //     const realIndex = this.realIndex
                    //     that.handleClickBanner(realIndex)
                    //   },
                    slideChange() {
                        that.$refs.awiperProgress.style.left = this.realIndex * 60 + 'px'
                    }
                }
            },}
}
``computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper
        },
    },


```kotlin
  .swiper-content {
        width: 100%;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        padding-top: 32px;
        padding-bottom: 80px;

        .show-swiper {
            width: 100%;
            top: 0;
            left: 0;

            .swiper-slide {
                width: 85.333vw;
                margin-bottom: 50px;


                .swiper-item {
                    width: 100%;
                    border-radius: 6px;
                    font-size: 6.4vw;
                    line-height: 1.5;
                    transform: translateX(-2.667vw);
                    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);

                    img {
                        border-radius: 8px 8px 0px 0px;
                        width: 100%;
                    }

                    .swiper-item-titel {
                        margin-top: 25px;
                        font-size: 22px;
                        font-family: PingFang SC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        line-height: 22px;
                        position: relative;
                    }

                    .swiper-item-titel::after {
                        content: '';
                        position: absolute;
                        top: 32px;
                        left: 0px;
                        height: 3px;
                        background: linear-gradient(315deg, #FF3430 0%, #FF6663 100%);
                        width: 20px;
                    }

                    .swiper-item-detail {
                        margin-top: 27px;
                        font-size: 14px;
                        font-family: PingFang SC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                        line-height: 16px;
                        padding-bottom: 30px;
                    }
                }
            }

            .swiper-slide-next {
                transform: translate3d(20.8111px, 0px, -648.345px) rotateX(0deg) rotateY(0deg) scale(1.3) !important;
            }
        }

        .swiper-pagination {
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 240px;
            height: 4px;
            background: #D9D9D9;

            border-radius: 2px;

            .swiper-pagination-progress {
                position: absolute;
                top: 0;
                width: 60px;
                height: 4px;
                background: linear-gradient(315deg, #FF3430 0%, #FF6663 100%);
                border-radius: 2px;
                transition: all 0.1s;
            }
        }
    }