Swiper JS移动端激活滑块缩放至1.1的实现问题

看起来你已经搞定了初始状态下第一个滑块的缩放，但切换时没处理好旧滑块的样式重置和新滑块的样式应用，导致功能失效。我给你调整一下代码，就能完美解决这个问题：

第一步：封装通用的缩放控制函数 #

先写一个复用性强的函数，专门处理滑块的缩放逻辑，这样初始化和切换场景都能调用，避免重复写代码：

function updateActiveSlideScale(swiper) {
  // 先把所有滑块的缩放重置为默认值
  swiper.slides.forEach(slide => {
    slide.style.transform = 'scale(1)';
  });
  // 给当前激活的滑块设置1.1倍缩放
  const activeSlide = swiper.slides[swiper.realIndex];
  activeSlide.style.transform = 'scale(1.1)';
}

第二步：在Swiper配置中调用这个函数 #

把原来的init和slideChange回调改成调用上面的函数：

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1.5,
  spaceBetween: 15,
  centeredSlides: true,
  init: function() {
    updateActiveSlideScale(this);
  },
  slideChange: function() {
    updateActiveSlideScale(this);
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
});

第三步：添加过渡动画让缩放更流畅 #

在CSS里给滑块加上过渡效果，让缩放切换的过程更自然：

.swiper-slide {
  width: 250px;
  height: 300px;
  border-radius: 10px;
  transition: transform 0.3s ease; /* 新增过渡动画 */
}

为什么这样能解决问题？ #

之前的代码只在初始化时给第一个滑块加了缩放，但切换时没有把之前激活的滑块恢复默认尺寸，也没有给新的激活滑块应用缩放规则。现在这个通用函数每次都会先重置所有滑块的样式，再给当前激活项设置缩放，不管怎么切换滑块，都能保证只有当前激活的滑块是1.1倍大小，其余滑块保持默认尺寸。

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