Swiper, couleur d'arrière-plan glisser-glisser n'est pas correct

Question

Je veux que ces trois couleurs d'arrière-plan de diapositive se relaient.

comme ceci: vert (1) -> orange (2) -> vert (3) - orange (1) ...

Mais le comportement actuel n'est pas comme prévu.

Comment puis-je résoudre ce problème?

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

Vous pouvez définir la couleur d'arrière-plan sur les diapositives alternatives mais le vrai truc est de les basculer lorsque les diapositives en double sont régénérés pour la fonctionnalité en boucle.

J'ai modifié votre code fourni avec une variable pour suivre la progression et une condition de test lorsque les diapositives commencent à changer.

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>