jQuery轮播下一个元素不滑入

Question

看到这个fiddle：http://jsfiddle.net/r0mvyLmx/

我必须从头开始编写一个简单的 jQuery 水平旋转木马，但我无意中遇到了以下问题：按下下一个按钮时，当前元素滑出视图就好了，但是下一个元素不会滑入。它仅在前一个元素完全超出视图后才会显示。如果你还不明白我的意思，这就是我想要的效果：http://jsfiddle.net/yvD5S/（下一张和上一张幻灯片同时滑动）。

这是我的代码：

    $('#carousel-outer button:last').on('click', function () {
        var slide = $('#carousel-inner .item.active');

        slide.animate({'margin-left':'-480px'},2000,function() {
            slide.css({ 'margin-left': 0 });
            slide.parent().find('div:last').after(slide);
            slide.removeClass('active');
            slide.parent().find('div:first').addClass('active');
        });
    });

Answer 1

哎呀，问题原来很简单。错误的不是 jQuery，而是 CSS。在旋转木马的内层包装纸上，我给它设置了与外层包装纸相同的宽度，并且幻灯片不是内联显示，而是块状显示，因此它们无法一个接一个地流动。我已经为任何对此问题感兴趣的人更新了 fiddle：http://jsfiddle.net/r0mvyLmx/1/。 JS 中也有一个小的变化，以保持 display:none.

的非活动元素

CSS:

#carousel-outer {
    width: 480px;
    margin: 0 auto;
    overflow: hidden;    
}

#carousel-inner {
    width: 1600px;
    height: 200px;
    overflow: hidden;
}

jQuery 变化：

$('#carousel-outer button:last').on('click', function () {
    var slide = $('#carousel-inner .item.active');

    slide.next().addClass('active');
    slide.animate({'margin-left':'-480px'},2000,function() {
        slide.css({ 'margin-left': 0 });
        slide.parent().find('div:last').after(slide);
        slide.removeClass('active');
});

jQuery轮播下一个元素不滑入

jQuery carousel next element not sliding in

html

javascript

css

jquery

carousel