Question

我正在使用光滑的滑块创建包含4张图像的主页滑块。第一张图片是唯一的，我需要更改背景图片。我目前正在将:: before和:: after用于我的CSS更改。我可以在活动状态下获得第一张幻灯片，以将该类添加到父div，但是一旦切换到下一张幻灯片，它就不会删除添加的类。

见下文：

<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');
    }
});

});

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

1 个答案: