如何使用Swiper JS实现带非聚焦元素模糊效果的HTML/CSS轮播（适配WordPress）

核心Swiper配置调整 #

实现三个元素同步位移的核心是开启居中控件、设置三栏可视宽度，保证轮播位移时三个卡片始终保持等距同步运动，配置如下：

const swiper = new Swiper('.swiper-container', {
  // 核心布局参数
  slidesPerView: 3,
  centeredSlides: true,
  spaceBetween: 30,
  loop: true,
  loopAdditionalSlides: 2,
  // 实时监听轮播状态更新样式
  on: {
    slideChange: applySlideBlurStyle,
    setTranslate: applySlideBlurStyle
  },
  // 保留原有分页功能
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
});

• 相比原有配置，移除单栏显示参数，开启居中模式后激活卡片会始终固定在屏幕视觉中心，左右卡片随轮播运动同步平移，不会出现错位
• 补充循环填充参数，避免轮播到底时出现卡片数量不足的留白问题

非激活元素模糊效果实现 #

通过监听轮播的实时位移状态，动态计算每个幻灯片距离激活中心的偏移量，给非激活元素匹配对应的模糊强度，实现平滑过渡的效果：

function applySlideBlurStyle(swiper) {
  swiper.slides.forEach((slideEl) => {
    // 跳过激活状态的卡片
    if (slideEl.classList.contains('swiper-slide-active')) {
      slideEl.style.filter = 'blur(0px)';
      slideEl.style.opacity = '1';
      return;
    }
    // 计算非激活卡片的偏移距离，匹配模糊强度
    const offsetDist = Math.abs(swiper.getSlideTranslateOffset(slideEl));
    const blurLevel = Math.min(offsetDist * 0.02, 6);
    slideEl.style.filter = `blur(${blurLevel}px)`;
    slideEl.style.opacity = '0.7';
  });
}

• 激活位置的卡片完全无模糊，保持最高不透明度
• 距离中心越远的非激活卡片，模糊强度越高，和设计参考效果一致

配套CSS适配修正 #

调整原有样式的不兼容问题，适配WordPress环境无样式冲突：

/* 轮播容器适配 */
.swiper-container {
  width: 100%;
  height: auto;
  padding: 60px 0;
  overflow: hidden;
}
/* 幻灯片过渡效果，让位移和模糊切换更丝滑 */
.swiper-slide {
  cursor: pointer;
  text-align: center;
  background: transparent;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; /* 修正原有不合法的wrap属性写法 */
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
/* 幻灯片内图片适配三栏布局 */
.swiper-slide img {
  max-width: 80%;
  height: auto;
}
/* 原有标题样式保留，无需额外调整 */
.testosotto {
  margin-top: -15px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

WordPress 部署注意事项 #

• 优先使用站点本地部署的Swiper核心资源，避免额外引入第三方资源造成版本冲突
• 给轮播容器添加专属类名前缀（如featured-content-swiper），所有自定义样式都附带该前缀，避免和主题、其他插件的样式产生冲突
• 原有计划单独处理的背景样式，直接设置在轮播的外层包裹div上即可，无需侵入修改轮播容器本身的样式
• 不要在全局页面头加载该轮播的相关代码，仅在需要展示轮播的页面（如首页模板）按需引入，减少页面冗余加载

内容的提问来源于stack exchange，提问作者Giuliano Maria Lodi