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

【问题标题】：Add class to parent div and then remove it将类添加到父 div，然后将其删除
【发布时间】：2026-01-16 19:05:03
【问题描述】：

我正在使用 slick 滑块创建一个包含 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>

【问题讨论】：

我认为你想要做的是挂钩到 slickSlider 的 beforeChange 或 afterChange 事件。请参阅 slickslider 文档。

标签： jquery css slider carousel slick.js

【解决方案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');
    }
});

});

【讨论】：