Removing block on slider slick event?

Question

JavaScript

Good afternoon!
There is a slick slider, you need to do the following: if the active slide has an image with the .locked class, then you need to remove a certain element, if this image is not there, then the block remains in place.
I'm trying to do it using the afterChange event, but it doesn't work, when I switch slides, it simply deletes the block and doesn't return.
What am I doing wrong, and how is it right? Tell me please

$('.slider-1').on('afterChange', function() {
    if($(".slider-1 .slide-active img").hasClass("locked-class")){
      $('.block').css('display','none');
    }else{
      $('.block').css('display','block');
    }
      
  });

Answer 1

1 way

.locked-class .block{
display: none;
}

2 way

var origFn = $.fn.addClass;  
$.fn.addClass = function(className)
{
    //  Выполняем здесь необходимый нам код
    //  и вызываем оригинальную функцию

    origFn.apply(this, arguments);
}

3 way

jQuery('header').bind('classChanged', function(){
console.log('class changed');	
});

4 way

(function(){
    var originalAddClassMethod = jQuery.fn.addClass;
    var originalRemoveClassMethod = jQuery.fn.removeClass;
    jQuery.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
    jQuery.fn.removeClass = function(){
        var result = originalRemoveClassMethod.apply( this, arguments );
        jQuery(this).trigger('classChanged');
        return result;
    }
})();

Choose!