Swiper JS中如何设置自定义三次贝塞尔曲线缓动效果？

你的代码没生效的核心原因是：默认的slide效果由CSS驱动，Swiper的easing配置仅对JS驱动的动画生效。以下是两种可行的解决方案：

方案1：通过CSS覆盖过渡曲线（推荐，性能更好） #

默认情况下，Swiper的轮播容器.swiper-wrapper使用CSS过渡实现滑动动画，直接修改它的transition-timing-function属性即可替换缓动曲线：

.swiper-wrapper {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

添加!important是为了覆盖Swiper内置的默认样式，确保自定义曲线生效。

方案2：开启JS驱动动画并配置easing #

如果需要通过JS层面控制缓动，可以开启cssMode: false强制使用JS驱动动画，此时easing配置会生效：

const swiper = new Swiper(".swiper", {
  effect: "slide",
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  speed: 1000,
  cssMode: false, // 启用JS驱动动画
  easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
});

注意：JS驱动动画的性能略逊于CSS驱动，适合需要更复杂JS动画逻辑的场景。

版本兼容提示 #

• 对于Swiper 7/8/9版本，上述两种方案均适用。
• 若使用Swiper 5及更早版本，CSS覆盖方案依然有效；JS驱动模式下需确认easing配置项是否存在（部分旧版本可能使用transitionTimingFunction控制CSS过渡，easing仅针对特定JS动画）。

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