在重置循环(从头开始滑块)之前暂停滑块中的最后一个图像

Question

我正在从头开始制作一个滑块(试图掌握它的窍门)，但我遇到了一个问题。在我的滑块中，所有幻灯片都需要3秒才能转到下一张，但是一旦到达最后一张幻灯片，就没有时间查看它了。

我想添加从最后一张幻灯片到第一张幻灯片的平滑过渡。

这里有一个小提琴http://jsfiddle.net/4wnrwkf0/

function startSlider() {
    interval = setInterval(function() {
        $sliderContainer.animate({'margin-left': '-=+100%'}, animationSpeed, function() {
            if (++currentSlide === $slides.length+1) {
                currentSlide = 1;
                $sliderContainer.css('margin-left', 0);
            }
        });
    }, pause);
}

我猜我的问题是在这个代码的某处

目前我在最后使用空白幻灯片…但我不想就这样结束:P

Thanks in advance

编辑:

我找到了一个有效的解决方案，通过重复第一张幻灯片在ul的末尾，似乎有点黑客，所以如果有人有一个想法，我愿意尝试替代方案。不管怎样…如果有人觉得有用:http://jsfiddle.net/eclipticald/2gLh5ks0/

Answer 1

如果效果解决了您的问题，请查看此提琴- http://jsfiddle.net/4wnrwkf0/5/

来自:

if (++currentSlide === $slides.length+1) {
   currentSlide = 1;
   $sliderContainer.css('margin-left', 0);
}

:

if (++currentSlide === $slides.length+1) {
   $sliderContainer.animate({'margin-left': '0'}, animationSpeed, function() {
       currentSlide = 1; 
   });
}

编辑。另一个更新的小提琴，所以最后一张幻灯片不会显示白色/空白的幻灯片，而是去幻灯片#1。http://jsfiddle.net/4wnrwkf0/6/

欢呼。