swiper.js实现环绕椭圆的环形效果垂直文本滑块

实现思路 #

原有通过静态CSS类给相邻slide加固定左偏移的方案，只能实现基础错位，无法匹配椭圆弧度，滑动过程也没有连续的环形动效。要实现自然的环绕效果，核心是通过椭圆参数方程实时计算每个slide的水平偏移，和滑动进度完全绑定：

• 保留slidesPerView: 3配置，开启centeredSlides让当前激活slide始终垂直居中，作为椭圆轨迹的定位基准
• 监听Swiper的progress事件，遍历所有slide获取其相对于中点的位置占比
• 用椭圆右半弧坐标公式计算每个slide对应的水平偏移量：垂直方向总跨度对应椭圆长轴（匹配3个slide总高度），水平最大偏移对应椭圆短轴（和原有30px偏移逻辑对齐），让所有slide刚好贴合椭圆右侧外围
• 把椭圆边框的渐变旋转角度和当前激活slide位置绑定，替代原来固定每次加10deg的逻辑，保证渐变旋转和滑动完全同步无跳变
• 给slide加平滑过渡属性，让滑动位移更自然

完整修改代码 #

JavaScript #

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 3,
  spaceBetween: 0,
  direction: "vertical",
  centeredSlides: true,
  mousewheel: {
    forceToAxis: true,
    sensitivity: 100,
    releaseOnEdges: true
  },
  on: {
    progress: function() {
      const maxOffset = 35; // 最大左偏移，适配椭圆边缘
      // 遍历所有slide计算实时位置
      this.slides.forEach((slide) => {
        const slideProgress = slide.progress;
        // 超出可视范围的slide直接隐藏
        if (Math.abs(slideProgress) > 1) {
          slide.style.opacity = 0;
          return;
        }
        // 椭圆右半弧公式计算水平偏移：越靠近中点偏移越大，越靠近上下两端偏移越小
        const offsetX = maxOffset * Math.sqrt(1 - Math.pow(slideProgress, 2));
        slide.style.transform = `translateX(${-offsetX}px)`;
        slide.style.opacity = 1 - Math.abs(slideProgress) * 0.3;
        // 文本内容同步做递进偏移，强化层次感
        const p = slide.querySelector('p');
        const h3 = slide.querySelector('h3');
        if (p) p.style.marginLeft = `${offsetX * 0.4}px`
        if (h3) h3.style.marginLeft = `${offsetX * 0.2}px`
      })
      // 渐变旋转角度和滑动位置完全同步，每个slide对应60度旋转
      const rotateDeg = this.activeIndex * 60;
      document.getElementById("swipper-ellipse").style.background = 
        `linear-gradient(black, black) padding-box,linear-gradient(${rotateDeg}deg, darkblue, white) border-box`;
    }
  }
});

CSS #

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: black;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  width: 100%;
  height: 100%;
}

.mySwiper {
  width: 300px;
  height: 500px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  color: white;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: flex-start;
}

h3 {
  margin-bottom: 0;
  transition: margin-left 0.3s ease;
}
p {
  text-align: left;
  margin-top: 5px;
  transition: margin-left 0.3s ease;
}
#swipper-section {
  display: flex;
  gap: 20px;
}
#swipper-ellipse {
  background: linear-gradient(black, black) padding-box,
    linear-gradient(90deg, darkblue, white) border-box;
  height: 400px;
  width: 150px;
  border-radius: 50%;
  margin-top: 50px;
  border: 8px solid transparent;
  transition: background 0.3s ease;
}

注意：需要删除原有CSS中写死的.swiper-slide-active、.swiper-slide-next相关偏移样式，避免和JS动态计算的transform属性冲突。

HTML #

原有DOM结构和资源引入不需要做任何修改，保持原有代码即可。

效果说明 #

• 始终保持同屏显示3个slide的配置，上下非激活slide透明度降低，和原有视觉逻辑一致
• 所有slide水平偏移完全匹配椭圆右侧弧度，滑动时沿椭圆外围平滑移动，呈现自然的环形环绕效果
• 椭圆边框渐变跟随滑动进度连续旋转，无切页跳变卡顿
• 原有鼠标滚轮交互逻辑完全保留

内容的提问来源于stack exchange，提问作者Maxswift