Сохраните начальную анимацию для других слайдов

Question

У меня есть анимация, в которой показано несколько слайдов с соответствующим заголовком. Моя проблема состоит в том, чтобы создать ту же начальную анимацию на других слайдах. При первом запуске анимация названия появляется слева, а в других слайдах не работает. Я хочу, чтобы анимация названия была видна при первом запуске, всегда оставайтесь на других слайдах. как мне это сделать?. Я использую wow.js для анимации названия. (анимация слева) slick.js для слайдов.

это мой проект, надеюсь, ваша помощь.

https://jsfiddle.net/vvj2n4g7/

new WOW().init(); //http://mynameismatthieu.com/WOW/ 

$(document).ready(function() { 
    $('.sliderMain').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    fade: true, 

    autoplay: true, 
    autoplaySpeed: 4000 //5000 
    }); 
    $('.sliderSidebar').slick({ 
    slidesToShow: 5, 
    slidesToScroll: 1, 
    dots: false, 
    centerMode: false, 
    focusOnSelect: true, 
    vertical: true, 
    arrows: false 
    }); 
    $('.sliderMain').on('afterChange', function(event, slick, currentSlide) { 
    var vid = $(slick.$slides[currentSlide]).find('video'); 
    if (vid.length > 0) { 
     $('.sliderMain').slick('slickPause'); 
     $(vid).get(0).play(); 
    } 

    }); 

    var videos = document.getElementsByTagName('video'); 

    for (var i = 0; i < videos.length; i++) { 
    videos[i].addEventListener('ended', myHandler, false); 
    } 

    function myHandler(e) { 
    console.log('Video Complete') 
    $('.sliderMain').slick('slickPlay'); 
    } 

}); 

Answer 1

Я решил проблему добавив «beforeChange» для того, чтобы установить дисплей непревзойденными, и установить дисплей для блокировки в вашем случае afterChange, ваш код должен выглядеть следующим образом:

$('.sliderMain').on('afterChange', function(event, slick, currentSlide) { 
    var vid = $(slick.$slides[currentSlide]).find('video'); 
    if (vid.length > 0) { 
     $('.sliderMain').slick('slickPause'); 
     $(vid).get(0).play(); 
    } 
    //After change set it to block 
    $('.contenedor_nombre_proyecto').css("display", "block"); 
}); 

//Add this event handler 
$('.sliderMain').on('beforeChange', function(event, slick, currentSlide) { 
    //Defore change set it to none 
    $('.contenedor_nombre_proyecto').css("display", "none"); 
}); 

Ваш полный JQuery должен выглядеть следующим образом:

new WOW().init(); //http://mynameismatthieu.com/WOW/ 

$(document).ready(function() { 
    $('.sliderMain').slick({ 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     arrows: false, 
     fade: true, 

     autoplay: true, 
     autoplaySpeed: 4000 //5000 
    }); 

    $('.sliderSidebar').slick({ 
     slidesToShow: 5, 
     slidesToScroll: 1, 
     dots: false, 
     centerMode: false, 
     focusOnSelect: true, 
     vertical: true, 
     arrows: false 
    }); 

    $('.sliderMain').on('afterChange', function(event, slick, currentSlide) { 
     var vid = $(slick.$slides[currentSlide]).find('video'); 
     if (vid.length > 0) { 
      $('.sliderMain').slick('slickPause'); 
      $(vid).get(0).play(); 
     } 
     //After change set it to block 
     $('.contenedor_nombre_proyecto').css("display", "block"); 
    }); 

    $('.sliderMain').on('beforeChange', function(event, slick, currentSlide) { 
     //Defore change set it to none 
     $('.contenedor_nombre_proyecto').css("display", "none"); 
    }); 

    var videos = document.getElementsByTagName('video'); 

    for (var i = 0; i < videos.length; i++) { 
     videos[i].addEventListener('ended', myHandler, false); 
    } 

    function myHandler(e) { 
     console.log('Video Complete') 
     $('.sliderMain').slick('slickPlay'); 
    } 
});