Необходимо добавить opacity-анимацию появляющихся и исчезающих элементов слайдера.

Question

https://codepen.io/FedorT/pen/wOapyy

$(document).ready(function(){
// https://www.npmjs.com/package/slick-carousel
var $my_slider = $('#my_slider');
$my_slider.slick({
  autoplay: true,
  infinite: true,
  autoplaySpeed: 0,
  speed: 5*1000,
  cssEase: 'linear',
  centerMode: true,
  slidesToShow: 3,
  dots: false,
  arrows: false,
  pauseOnHover: false,
  pauseOnFocus: false,
});


$my_slider.on('beforeChange', function(e, slick, currentSlide, nextSlide) {
    var $slides_active = slick.$slides.filter('[aria-hidden="false"]');
    var $slides_notActive = slick.$slides.filter('[aria-hidden="true"]');


    $($slides_active).each(function(i, el){
        $(this).addClass('_red');
        var self = this;
        setTimeout(function(){
          $(self).removeClass('_red');
        }, 5000);
    });




});

});

Помогите, пожалуйста, правильно добавить анимацию непрозрачности.

Что мне именно нужно: 1. Когда запускается слик,должен быть только первый активный слайд без непрозрачности.2. Пока появляются новые слайды, старые должны исчезнуть.

PS Для лучшего просмотра я изменил непрозрачность на эффект фона.

Извините за мой английский