将 class 添加到父级 div，然后将其删除

Question

我正在使用 slick slider 创建一个包含 4 张图片的主页滑块。第一张图片是独一无二的，我需要更改背景图片。我目前正在使用 ::before 和 ::after 进行 css 更改。在将 class 添加到父级 div 时，我可以获得第一张幻灯片，但是一旦切换到下一张幻灯片，它就不会删除添加的 class.

见下文：

<div class="carousel-inner">
    <div class="item mega-slide">
        <div class="carousel-image" style="background-image: url('<?php echo get_template_directory_uri();?>/assets/images/home-mega-volume.jpg');"></div>
    </div>  
    <div class="item" >
        <div class="carousel-image" style="background-image: url('<?php echo get_template_directory_uri();?>/assets/images/slide1.jpg');"></div>
    </div>
    <div class="item" >
        <div class="carousel-image" style="background-image: url('<?php echo get_template_directory_uri();?>/assets/images/slide2.jpg');"></div>
    </div>      
    <div class="item" >
        <div class="carousel-image" style="background-image: url('<?php echo get_template_directory_uri();?>/assets/images/slide3.jpg');"></div>
    </div>
</div>
<script>
jQuery(document).ready(function($){
$('.carousel-inner').slick({
dots: false,
autoplay: true,
arrows: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
adaptiveHeight: true,
fade:true,
asNavFor: '.carousel-text',
cssEase:"linear"
});
  if ( $(".mega-slide").hasClass("slick-active") ) {
   $(".carousel-bg").addClass("remove");
  }
  else ($(".carousel-bg").removeClass("remove"));
  });

  </script>

Answer 1

经测试工作正常。希望对你有帮助。

jQuery(document).ready(function($){
$('.carousel-inner').slick({
  dots: true,
  autoplay: false,
  autoplaySpeed: 5000,
  infinite: true,
  speed: 1000,
  slide: '.item',
  cssEase: 'linear'
});

$('.carousel-inner').on('afterChange', function(event, slick, currentSlide, nextSlide){
    $('.carousel-inner').removeClass('addedactive');
    if(currentSlide == 0){
        $('.carousel-inner').addClass('addedactive');
    }
});

});

将 class 添加到父级 div，然后将其删除

Add class to parent div and then remove it

css

jquery

slider

carousel

slick.js