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

我使用Swiper（无jQuery，纯JavaScript）显示11张幻灯片。我想根据用户所在的幻灯片更改主体

背景色

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

 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';
     }
 });

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

为什么索引没有重新启动？
Swiper将其数组索引移动1。如文档中所示


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


您可以使用
this.realIndex
根据文档获取循环项的正确索引。
稍微优化您的代码。我还可以注意到您使用的库可能已损坏。在相同的转换之后，活动索引不相同。有时第一个元素显示为0，有时为1，另一种情况是我收到12个作为活动索引，尽管代码中只有11项。