swiper

    <div class="content2">
        <div class="center" style="position:relative">
            <div class="swiper-container2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">

                        <img src="@/assets/index/content2bg1.png" />
                    </div>
                    <div class="swiper-slide">

                        <img src="@/assets/index/content2bg2.png" />
                    </div>
                    <div class="swiper-slide">

                        <img src="@/assets/index/content2bg3.png" />
                    </div>
                    <div class="swiper-slide">

                        <img src="@/assets/index/content2bg4.png" />
                    </div>
                    <div class="swiper-slide">

                        <img src="@/assets/index/content2bg5.png" />
                    </div>
                    <div class="swiper-slide">

                        <img src="images/index/content2bg6.png" />
                    </div>
                </div>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
__________________________
  mounted() {
    var swiper2 = new Swiper('.swiper-container2', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        autoplay: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        on: {
            progress: function (progress) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i);
                    var slideProgress = this.slides[i].progress;
                    var modify = 1;
                    if (Math.abs(slideProgress) > 1) {
                        modify = (Math.abs(slideProgress) - 1) * 0.1 + 1;
                    }
                   var translate = slideProgress * modify * 500 + 'px';
                   var scale = 1 - Math.abs(slideProgress) / 5;
                  var  zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                    slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                    slide.css('zIndex', zIndex);
                    slide.css('opacity', 1);
                    if (Math.abs(slideProgress) > 3) {
                        slide.css('opacity', 0);
                    }
                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }

            }
        }

    })
  }
___________________________
    .content2 {
        margin: 96px auto;
        height: 770px;
        /* background: url("./images/index/bg.png"); */
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        text-align: center;
        overflow: hidden;
    }

    .content2 .swiper-slide {
        width: 700px;
        height: 400px;
        border-radius: 20px;
        margin-top: 67px;
    }

    .content2 .swiper-slide img {
        display: block;
        width: 100%;

    }

点击分页器切换图片
pagination: {
el: ".swiper-pagination",
clickable :true,
}
用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
autoplay: {
disableOnInteraction: false,
},