vue2+swiper 纵向弧形滚动效果

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

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

方案1：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

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：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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);             }           },         },       },