Swiper.js中间聚焦幻灯片背景色设置异常问题及修复方案

你当前的实现仅在幻灯片切换完成时更新颜色，且内联样式优先级导致JS设置失效，同时缺少必要的事件监听来覆盖滑动过程中的状态变化，以下是具体修正方案：

1. 移除HTML幻灯片的内联背景色 #

删除每个swiper-slide标签中的内联background-color样式，避免其优先级高于JS动态设置的样式：

<div class="swiper-wrapper" style="position: absolute;">
  <!-- Slide-start -->
  <div class="swiper-slide tranding-slide"></div>
  <!-- Slide-end -->
  <!-- Slide-start -->
  <div class="swiper-slide tranding-slide"></div>
  <!-- Slide-end -->
  <!-- Slide-start -->
  <div class="swiper-slide tranding-slide"></div>
  <!-- Slide-end -->
</div>

2. 用CSS设置默认幻灯片背景色 #

在CSS中添加全局默认样式，确保所有非活跃幻灯片为蓝色：

.tranding-slide {
  background-color: blue;
}

/* 保留你原有其他CSS代码 */
.container1{
  width: 100%;
}
/* ... 其余原有CSS代码不变 ... */

3. 修正JS代码 #

移除无效代码，添加多事件监听确保初始化和滑动过程中都能正确更新颜色：

document.addEventListener("DOMContentLoaded", function () {
  const TrandingSlider = new Swiper('.tranding-slider', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    loop: true,
    slidesPerView: 2,
    spaceBetween: 0,
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      outerWidth: 200,
      modifier: 2.5,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    on: {
      init: updateSlideColors,       // 初始化时执行
      slideChange: updateSlideColors, // 切换完成时执行
      transitionStart: updateSlideColors // 滑动开始时执行，确保实时响应
    }
  });

  function updateSlideColors() {
    // 重置所有幻灯片为蓝色
    const slides = TrandingSlider.slides;
    slides.forEach(slide => {
      slide.style.backgroundColor = 'blue';
    });

    // 设置中间活跃幻灯片为黑色
    const activeSlide = slides[TrandingSlider.activeIndex];
    if (activeSlide) {
      activeSlide.style.backgroundColor = 'black';
    }
  }
});

关键修正说明 #

• 移除内联样式：内联style优先级高于JS动态设置，会导致颜色无法被覆盖。
• 多事件监听：仅slideChange事件只在切换完成时触发，添加init确保初始状态正确，transitionStart确保滑动过程中状态变化时立即更新。
• 使用Swiper实例属性：直接通过TrandingSlider.slides和TrandingSlider.activeIndex获取元素，比DOM查询更高效准确。

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