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>