javascript - 为其他幻灯片保留初始动画

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');
    }
});