Swiper，swiper-slide背景色不正確

Question

我想要這些三張幻燈片背景顏色輪流使用。

這樣的：綠色（1） - >橙色（2） - >綠色（3） - 未如預期橙色（1）...

但是當前的行爲。

我該如何解決這個問題？

window.onload = function() { 
 

 
    const defaultOptions = { 
 
    speed: 2000, 
 
    autoplay: true, 
 
    spaceBetween: 4, 
 
    direction: 'vertical', 
 
    loop: true, 
 
    slidesPerView: 'auto', 
 
    watchSlidesVisibility: true 
 
    }; 
 

 
    const swiper = new Swiper('.swiper-container', defaultOptions) 
 
}

.swiper-container{ 
 
    height: 52px; 
 
    } 
 

 
    .swiper-slide{ 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 26px; 
 
    max-width: 100%; 
 
    padding: 0 10px; 
 
    }

<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script> 
 
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/> 
 

 
<div class='swiper-container'> 
 
    <div class='swiper-wrapper'> 
 
    <div class='swiper-slide' style='background: green'>message 1</div> 
 
    <div class='swiper-slide' style='background: orange'>message 2</div> 
 
    <div class='swiper-slide' style='background: green'>message 3</div> 
 
    </div> 
 
</div>

Answer 1

您可以設置備用幻燈片的背景顏色，但真正的關鍵是切換他們當重複幻燈片再生的循環功能。

我已經使用變量修改了您提供的代碼，以便在幻燈片開始更改時跟蹤進度和測試條件。

window.onload = function() { 
 

 
    var lastIndex = 0; 
 

 
    const defaultOptions = { 
 
    speed: 2000, 
 
    autoplay: true, 
 
    spaceBetween: 4, 
 
    direction: 'vertical', 
 
    loop: true, 
 
    slidesPerView: 'auto', 
 
    watchSlidesVisibility: true, 
 
    onSlideNextStart: function(swiperObj) { 
 
     if (swiperObj.activeIndex < lastIndex) { 
 
     swiperObj.container[0].classList.toggle('alt-bg'); 
 
     } 
 
     lastIndex = swiperObj.activeIndex; 
 
    } 
 
    }; 
 

 
    const swiper = new Swiper('.swiper-container', defaultOptions) 
 
}

.swiper-container{ 
 
    height: 52px; 
 
    } 
 

 
    .swiper-slide{ 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 26px; 
 
    max-width: 100%; 
 
    padding: 0 10px; 
 
    background: green; 
 
    } 
 

 
    .swiper-slide:nth-child(2n+1){ 
 
    background: orange; 
 
    } 
 

 
    .alt-bg .swiper-slide{ 
 
    background: orange; 
 
    } 
 
    .alt-bg .swiper-slide:nth-child(2n+1){ 
 
    background: green; 
 
    }

<script src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.js"></script> 
 
<link href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.css" rel="stylesheet"/> 
 

 
<div class='swiper-container'> 
 
    <div class='swiper-wrapper'> 
 
    <div class='swiper-slide'>message 1</div> 
 
    <div class='swiper-slide'>message 2</div> 
 
    <div class='swiper-slide'>message 3</div> 
 
    </div> 
 
</div>