How to add a class to the generated slider element?

Question

JavaScript

I have pug markup like this.

.slider_right_wrap
            .slider_right
                .slider_right_item.no_opacity
                    .slider_right_item_content
                .slider_right_item
                    .slider_right_item_content                  
                .slider_right_item
                    .slider_right_item_content
            .nav_for_slider
                    .arrow_slider.arrow_left
                    .arrow_slider.arrow_right

I have such a slider

. The first slider has the "no_opacity" class, the rest are darkened. Accordingly, when pressed, only the current element of the slider is always opaque. Everything works well, but when the generated slides start to go, the class is not added to them. How to implement adding a class in the same way to new, generated elements? I tried to implement it through event delegation, but it didn’t work out, maybe I did something wrong.
I have this jquery code:

$('.slider_right').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
    });

    $('.slider_left').slick({
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });

    $('.arrow_right').on('click', function() {
        $('.slider_right').slick('slickNext');
        let selected_item = $('.slider_right').find('.opacity');
        selected_item.removeClass('opacity');
        selected_item.next().addClass('opacity'); 
      });

    $('.arrow_left').on('click', function() {
        $('.slider_right').slick('slickPrev');
        let selected_item = $('.slider_right').find('.opacity');
        selected_item.removeClass('opacity');
        selected_item.prev().addClass('opacity'); 
      });

Answer 1

Use:

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

And inside indicate which slide what to change.
If you upload the code to the sandbox, I will tell you more specifically.