如果显示带有 class 的幻灯片，则将 Slick Carousel add/remove class 添加到正文

Question

这是我的 html 标记：

<body> 
    <div class="slider">
        <div class="slide1">
            -- my slide 1 content --
        </div>
        <div class="slide2">
            -- my slide 2 content --
        </div>
        <div class="slide3">
            -- my slide 3 content --
        </div>
    </div>  
</body>

如果 'slide1' 正在显示，我如何将 class 'slide1-current' 添加到主体中，然后更改为 'slide2-current' 并同时删除 'slide1-current'如果显示 'slide2' 等等？

Answer 1

(function() {
  var slides = jQuery(".slider > div");
  console.log(slides);
  var currentDisplayed = 0;
  var childCount = slides.length;
  $(slides[currentDisplayed]).addClass("slider-current");
  setInterval(function() {
    $(slides[currentDisplayed]).removeClass("slider-current");
    if (currentDisplayed < (childCount - 1)) {
      $(slides[currentDisplayed]).removeClass("slider-current");
      currentDisplayed += 1;
    } else {
      currentDisplayed = 0;
    }
    $(slides[currentDisplayed]).addClass("slider-current");

  }, 1000);

})()

.slider-current {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <div class="slide1">
    -- my slide 1 content --
  </div>
  <div class="slide2">
    -- my slide 2 content --
  </div>
  <div class="slide3">
    -- my slide 3 content --
  </div>
</div>

Answer 2

你可以试试

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
}).on({
  beforeChange: function(event, slick, currentSlide, nextSlide) {
    $('body').removeClass('slide' + (currentSlide + 1) + '-current').addClass('slide' + (nextSlide + 1) + '-current')
  }
});

.slide1-current {
  color: red;
}
.slide2-current {
  color: green;
}
.slide3-current {
  color: blue;
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.css" />

<div class="slider">
  <div class="slide1">-- my slide 1 content --</div>
  <div class="slide2">-- my slide 2 content --</div>
  <div class="slide3">-- my slide 3 content --</div>
</div>

如果显示带有 class 的幻灯片，则将 Slick Carousel add/remove class 添加到正文

Slick Carousel add/remove class to body if an slide with class is showed

jquery

slick.js