求助：消除Swiper分页器与幻灯片背景色切换的延迟差异

我用HTML实现了一个包含图片和文本的Swiper滑块，代码如下：

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1"><img src="background-images/slide1.png"><h1>Slide 1</h1></div>
        <div class="swiper-slide slide2"><img src="background-images/slide2.png"><h1>Slide 2</h1></div>
        <div class="swiper-slide slide3"><img src="background-images/slide3.png"><h1>Slide 3</h1></div>
        <div class="swiper-slide slide4"><img src="background-images/slide4.png"><h1>Slide 4</h1></div>
        <div class="swiper-slide slide5"><img src="background-images/slide5.png"><h1>Slide 5</h1></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

通过以下CSS实现幻灯片切换时的背景色变化，这部分效果符合预期：

.slide1 {
    background-color: #FF0000;
}
.slide2 {
    background-color: #008000;
}
.slide3 {
    background-color: #0000FF;
}

现在需要让swiper-pagination的背景色随幻灯片切换同步变化，但当前实现存在延迟问题。尝试过以下代码：

swiper.on('slideChangeTransitionEnd', () => {
    const currentSlide = document.querySelector('.swiper-slide-active');
    const slideNumber = currentSlide.classList[1];
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        pagination.style.backgroundColor = 
        getComputedStyle(document.querySelector(`.${slideNumber}`)).backgroundColor;
    }, 50);
});

这段代码中的延迟值会影响分页器变色时间，但即便设为0或负值，滑动或自动切换时，分页器与幻灯片背景色的变化仍存在延迟差。仅点击前后按钮时两者变色同步无延迟，按钮相关代码如下：

prevButton.addEventListener('click', () => {
    const currentSlide = document.querySelector('.swiper-slide-active');
    const slideNumber = currentSlide.classList[1];
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        pagination.style.backgroundColor = getComputedStyle(document.querySelector(`.${slideNumber}`)).backgroundColor;
                }, 50);
});

nextButton.addEventListener('click', () => {
    const currentSlide = document.querySelector('.swiper-slide-active');
    const slideNumber = currentSlide.classList[1];
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
    pagination.style.backgroundColor = getComputedStyle(document.querySelector(`.${slideNumber}`)).backgroundColor;
            }, 50);
        });

问题根源 #

slideChangeTransitionEnd事件会等到幻灯片过渡动画完全结束后才触发，自然会滞后于幻灯片背景色的变化；而按钮点击时同步是因为点击触发时机与幻灯片切换的启动时机高度贴合。额外添加setTimeout只会人为放大时间差。

优化实现 #

1. 改用slideChange事件：该事件在幻灯片切换启动时触发，能和幻灯片背景色变化完全同步
2. 直接从Swiper实例获取当前激活幻灯片：避免重复查询DOM，提升效率
3. 移除不必要的setTimeout：消除人为延迟

修改后的代码：

const pagination = document.querySelector('.swiper-pagination');

// 统一监听slideChange事件，覆盖所有切换场景
swiper.on('slideChange', () => {
    const activeSlide = swiper.slides[swiper.activeIndex];
    const slideBgColor = getComputedStyle(activeSlide).backgroundColor;
    pagination.style.backgroundColor = slideBgColor;
});

说明 #

slideChange事件会在滑动切换、按钮点击、自动切换等所有场景下触发，因此无需单独给前后按钮添加点击事件，仅保留这一段监听代码即可实现全场景的同步变色，彻底消除延迟问题。

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