vue2+swiper 纵向弧形滚动效果

很垃圾的弧形轮播效果，其实不算弧形，只是一个爬坡效果，最终否了

但保留一下配置项的代码。。

方案1：

swiperOptions: {
        direction: "vertical",
        spaceBetween: -80,
        slidesPerView: 5,
        loop: true,
        centeredSlides: true, //当前的active slide是否居中
        watchSlidesProgress: true, //计算每个slide的progress
        grabCursor: true,
        pagination: false,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: false,
        on: {
          setTranslate: function () {
            let slides = this.slides;
            for (var i = 0; i < slides.length; i++) {
              const slide = document.querySelectorAll(".hero_swiper_side")[i];
              const progress = slides[i].progress;
              slide.style.opacity = "";
              slide.style.background = "";
              slide.style.transform = ""; //清除样式
              slide.style.opacity = 1 - Math.abs(progress) / 5;
              slide.style.transform =
                "translate3d(-" + (Math.abs(progress) * 80) / 100 + "rem,0, 0)";
            }
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              const slide = document.querySelectorAll(".swiper-slide")[i];
              if (slide[0]) slide.transition(transition);
            }
          },
        },
      },

　　

方案2：

swiperOptions: {
        direction: "vertical",
        spaceBetween: 20,
        slidesPerView: 5,
        centeredSlides: true, //当前的active slide是否居中
        watchSlidesProgress: true, //计算每个slide的progress
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        grabCursor: true,
        pagination: false,
        navigation: false,
        autoplay: false,
        on: {
          setTranslate: function () {
            let slides = this.slides;
            for (let i = 0; i < slides.length; i++) {
              let slide = slides[i];
              let progress = slides[i].progress;
              //140是盒子高度，12是一圈大概多少个
              let scaleY =
                Math.cos(
                  (Math.PI / 180) * Math.round(360 / 12) * Math.abs(progress)
                ) * 220;
              slide.style.transform = "translate3d(" + scaleY + "px, 0, 0)"; //偏移
            }
          },
          setTransition: function (swiper, transition) {
            for (var i = 0; i < this.slides.length; i++) {
              const slide = document.querySelectorAll(".swiper-slide")[i];
              if (slide[0]) slide.transition(transition);
            }
          },
        },
      },