第二张幻灯片后序列滑块停止

Question

我有自动播放的序列滑块设置,它只会滑到第二张幻灯片然后停止.应该滑过七张幻灯片.

这是我设置的选项的代码,但我不明白为什么它在幻灯片2之后停止.可能是CSS转换的问题？我很难过!

$(document).ready(function(){
var options = {
    autoPlay: true,
    autoPlayDelay: 1000,
    nextButton: true,
    prevButton: true,
    preloader: true
};
var sequence = $("#sequence").sequence(options).data("sequence");

sequence.afterLoaded = function(){
    $(".prev, .next").fadeIn(500);
}
});

该网站在这里 - http://aald.captechnix.com/

Answer 1

今天早些时候遇到同样的问题,并快速查看源代码.看起来sequence.js只是查看每个帧的直接子节点,以便在移动到下一帧之前确定动画何时结束.看看你的例子,看起来你没有在每个幻灯片的任何直接子节点上有任何转换,所以内部sequence.js永远不会将这些元素的"animationEnded"属性设置为true,并拒绝移动到下一张幻灯片.

确保每张幻灯片的所有直接子项至少具有.animate-in过渡,并且该元素的值实际上已过渡.所以在你的情况下尝试添加以下css(我省略了供应商前缀):

#sequence .width {
 transition: all 1s linear;
 z-index: 9999;
}
#sequence .animate-in .width {
 z-index: 9998; /* or some other property as long as it changes */
}

#sequence-theme img {
 transition: all 0.1s linear;
 opacity: 0;
}
#sequence-theme .animate-in img {
 opacity: 1; /* or some other property as long as it changes */
}