顺序滑块在第二次滑动后停止 [英] Sequence slider stopping after second slide

问题描述

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

这是我设置的选项的代码，但是我看不到为什么它在幻灯片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/

解决方案

今天早些时候出现了同样的问题，并快速浏览了源代码.看起来sequence.js只是查看每个帧的直接子级，以确定在移动到下一帧之前动画何时结束.查看您的示例，似乎每张幻灯片的任何直接子元素上都没有任何过渡，因此在内部sequence.js从未将这些元素的"a​​nimationEnded"属性设置为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 */
}

I have the sequence slider setup for autoplay and it will only slide to the second slide and then stops. There are seven slides that it should be sliding through.

Here is the code for the options I have set up but I can't see why it is stopping after slide 2. Maybe a problem with the CSS transitions? I'm stumped!

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

The website is here - http://aald.captechnix.com/

解决方案

Had the same issue earlier today and had a quick look at the source code. It looks like sequence.js is just looking at the direct children of each frame in order to determine when animations have ended before moving onto the next frame. Looking at your example it seems you don't have any transitions on any of the direct children of each slide so internally sequence.js never sets the "animationEnded" property to true for these elements and refuses to move onto the next slide.

Make sure all direct children of each slide has at least an .animate-in transition and that a value for that element is actually transitioned. So in your case try adding the following css (I've left out vendor prefixes):

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

这篇关于顺序滑块在第二次滑动后停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！