Swiper, Swiper-Folie Hintergrundfarbe ist nicht korrekt

Question

Ich möchte diese drei Folie Hintergrundfarbe abwechselnd nehmen.

wie folgt aus: grün (1) -> Orange (2) -> grün (3) - Orange (1) ...

Aber aktuelle Verhalten wird nicht wie erwartet.

Wie kann ich das beheben?

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

Sie können die Hintergrundfarbe auf alternative Folien gesetzt, aber der eigentliche Trick ihnen Makeln, wenn die doppelten Dias für die Looping-Funktionalität regeneriert werden.

Ich habe Ihren mitgelieferten Code mit einer Variablen modifiziert, um den Fortschritt und eine Testbedingung zu verfolgen, wenn sich die Folien zu ändern beginnen.

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>