Swiper，swiper-slide背景颜色不正确答案

【问题标题】：Swiper, swiper-slide background color is not correctSwiper，swiper-slide背景颜色不正确
【发布时间】：2017-09-17 03:53:13
【问题描述】：

我要这三种幻灯片背景颜色轮流使用。

像这样：绿色(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>

【问题讨论】：

你有循环：真，所以它添加了克隆，这就是你有这个问题的原因！并且克隆通常在之前和之后额外的幻灯片，在这种情况下，之前额外的绿色和之后的额外绿色！

标签： swiper

【解决方案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>

【讨论】：