swiper, swiper-slide 배경색이 올바르지 않습니다.

Question

이 3 가지 슬라이드 배경색이 번갈아 가도록하고 싶습니다. 이 같은

: 녹색 (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>