vue2+swiper 縱向弧形滾動效果

芝麻小仙女發表於2024-09-11
Vue

很垃圾的弧形輪播效果，其實不算弧形，只是一個爬坡效果，最終否了

但保留一下配置項的程式碼。。

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

　　

相關文章