如何实现keen-slider活跃幻灯片尺寸更大且保留动画？

有两种可靠的实现方式，你可以根据需求选择：

方法一：用CSS实现（推荐，更简单稳定） #

Keen Slider会自动给当前活跃的幻灯片添加keen-slider__slide--active类，直接通过CSS的缩放和过渡动画就能实现需求，不需要修改滑块的size参数：

/* 所有幻灯片默认缩放比例，加上过渡动画 */
.keen-slider__slide {
  transition: transform 0.2s ease-in-out;
  transform: scale(0.8); /* 非活跃幻灯片的大小 */
}

/* 活跃幻灯片放大 */
.keen-slider__slide--active {
  transform: scale(1); /* 活跃幻灯片的大小 */
}

这种方式动画流畅，不会干扰滑块的布局逻辑，完全不需要额外JS调用。

方法二：通过JS的update方法实现（保留size参数调整） #

如果你一定要通过修改幻灯片的size属性来实现，需要确保在slideChanged事件里调用update，并且正确传递动画参数。你之前的问题大概率是动画参数未被正确触发，或者调用时机不对：

// 初始化滑块
const slider = new KeenSlider("#slider", {
  initial: 0,
  // 初始就设置好幻灯片尺寸
  slides: (_, index) => ({
    size: index === 0 ? 0.4 : 0.2,
    spacing: 0.05
  }),
  // 幻灯片切换时触发更新
  slideChanged(s) {
    const activeIdx = s.details().relativeSlide;
    slider.update(
      // 生成新的幻灯片配置
      (_, index) => ({
        size: index === activeIdx ? 0.4 : 0.2,
        spacing: 0.05
      }),
      // 配置动画参数
      {
        defaultAnimation: {
          duration: 2000,
          easing: (t) => t * t // 可选，自定义缓动效果
        }
      },
      // 指定以当前活跃幻灯片为基准更新，确保动画正确触发
      activeIdx
    );
  }
});

需要注意：

• 必须在slideChanged事件里调用update，确保每次切换都触发动画
• 第三个参数idx要传递当前活跃幻灯片的索引，让滑块知道以哪个位置为基准做动画过渡
• 初始化时就要设置好初始的size配置，避免首次加载时的布局错乱

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