如何根據活動幻燈片更改正文背景顏色？

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

在這個 JSFiddle 上，您可以看到在第 11 張幻燈片之后，滑塊返回到第 1 張幻燈片，但顏色仍然是#999999而不是#F4F1C1 。

為什么索引沒有重新啟動？

Answer 1

Swiper 將其數組索引移動 1。如文檔中所示

所以你正確地從索引1開始，但沒有考慮索引12處的第 11 項

https://swiperjs.com/api/

您可以使用this.realIndex根據文檔獲取循環項的正確索引。