Добавить класс в родительский div, а затем удалить его

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

});