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 */
}

Answer 2

这里的替代解决方案是，如果我们添加以下功能：

setInterval(function () {document.getElementById("your-button-id").click();}, 5000);

这样我们第n次模拟按钮点击。如果您希望隐藏按钮，只需添加隐藏在箭头容器中的可见性：

.banner-arrow-container {
    visibility: hidden;
}

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

2 个答案: