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

我解决了你的问题，添加了＆＃34; beforeChange＆＃34;为了将显示设置为none，并在afterChange事件中将display设置为block，您的代码应如下所示：

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

保留其他幻灯片的初始动画

1 个答案: