20
Июл
2021

как убрать мерцание анимации Slick Slider

Есть слайдер kujy.ru/333/ при загрузке страницы и переходе с первого слайда на второй происходит мерцание анимации. А остальные переходы нормально работают. Как это поправить?

$('.slider-for').slick({
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    speed: 600,
    arrows: false,
    asNavFor: '.slider-nav',
    vertical: true,
    infinite: true,
}).slickAnimation();
$('.slider-nav').slick({
    // autoplay: true,
    centerMode: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    arrows: false,
    dots: true,
    focusOnSelect: true,
    infinite: true,
});

$('.slider-nav').on('afterChange', function(event, slick, currentSlide, nextSlide){
    let arrow = $('.slider-for .slick-slide')

    if(!arrow.hasClass('animate')) {
        arrow.addClass('animate');

    }
});

ксс

   .slider-for .slick-active.animate img {
   -webkit-animation: fadeIn 1.6s ease forwards;
   animation: fadeIn 1.6s ease forwards;
}

.slider-for .slick-active.animate h3 {
 -webkit-animation: fadeIn 1.6s ease forwards;
 animation: fadeIn 1.6s ease forwards;
}

.slider-for .slick-active.animate p {
 -webkit-animation: fadeIn 1.6s ease forwards;
 animation: fadeIn 1.6s ease forwards;
}

   введите сюда код
   

Источник: https://ru.stackoverflow.com/questions/1307115/%D0%BA%D0%B0%D0%BA-%D1%83%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D0%BC%D0%B5%D1%80%D1%86%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B0%D0%BD%D0%B8%D0%BC%D0%B0%D1%86%D0%B8%D0%B8-slick-slider

Тебе может это понравится...

Добавить комментарий