如何根据活动幻灯片更改身体背景颜色？

Question

我正在使用Swiper（无jQuery，纯JavaScript）显示11张幻灯片。我想根据用户所在的幻灯片来更改正文background-color。

此代码可以正常工作，但是当滑块重新启动时，它将保留最后一张幻灯片的颜色，而不是从第一张幻灯片重新开始：

 swiper.on('transitionEnd', function(e) {
     if (this.activeIndex == 1) {
       document.querySelector("body").style.background = '#F4F1C1';
     }
     if (this.activeIndex == 2) {
       document.querySelector("body").style.background = '#DCDDDE';
     }
     if (this.activeIndex == 3) {
       document.querySelector("body").style.background = '#ECEBDF';
     }
     if (this.activeIndex == 4) {
       document.querySelector("body").style.background = '#F2E3E3';
     }
     if (this.activeIndex == 5) {
       document.querySelector("body").style.background = '#D0EFF0';
     }
 });

在 this JSFiddle 上，您可以看到幻灯片11之后，滑块返回到幻灯片1，但是颜色仍然是#999999而不是#F4F1C1。 / p>

为什么索引不重新启动？

Answer 1

Swiper将其数组索引移动1。如文档中所示

因此，您正确地 从索引1开始，但没有考虑索引12的第11个项目

https://swiperjs.com/api/

您可以根据文档使用this.realIndex获取循环项的正确索引。