jQuery滑动横幅广告-将下一个窗格滑动到当前

Question

当前，我正在构建一个滑动横幅，为每个幻灯片显示带有背景文本的图像。屏幕上共有三张幻灯片以及单选按钮，可单击并滑动到下一张幻灯片。目前不使用单选按钮，因为我只是使用jQuery的click事件触发幻灯片事件。这是当前版本的Codepen：

https://codepen.io/anon/pen/WyVdOL

这是我目前用来滑动事件的jQuery click事件。它可以将项目滑出屏幕，然后在项目完全滑出屏幕后显示下一个项目：

$(function(){
    $('.slide').click(function() {
        $(this).animate({
            left: '-100%'
        }, 500, function() {
            $(this).css('left', '100%');
            $(this).appendTo('#slider');
        });
        $(this).next().css('left', '0%');
    });
});

我的目标是在屏幕上滑动下一个slide div以及从屏幕上滑动的下一个div；为避免出现空白，直到幻灯片离开屏幕，然后像现在一样突然弹出。

这是我用于幻灯片的CSS（随着媒体查询屏幕的缩小，调整为较小的尺寸，没有其他变化）：

main{background:#e5e5e5;color:#222;}
main #slider{height:300px;width:100%;overflow:hidden;position:relative;}
main .slide-button-contain{z-index:10;position:absolute;color:#fff;max-width:1100px;left:0;right:0;margin:0 auto;width:100%;}
main .slide-buttons{float:right;padding-top:260px;padding-right:22px;}
main .slide{position:relative;width:100%;height:100%;overflow:hidden;float:left;}
main .slide img{position:absolute;top:0;height:auto;overflow:hidden;z-index:0;left:0;width:100%;}
main .slide-content{z-index:10;position:absolute;color:#fff;max-width:1100px;left:0;right:0;margin:0 auto;width:100%;padding-left:22px;padding-right:22px;}
main .slide-title{font-size:44px;max-width:60%;padding-top:40px;}
main .slide-message{font-size:16px;max-width:60%;padding-top:20px;}
main .slide-buttons button{color:#fff;background:transparent;border:none;}

以下是当前情况的直观示例：

如您所见，在当前幻灯片完全不在屏幕上之前，它根本不会加载下一张幻灯片。我希望将其加载到当前幻灯片的后面，这样它就可以从屏幕上滑出，或者滑进它旁边以使其流畅地运动。这是我的意思的视觉助手：

第二个图像中的滑块是我在另一个项目中使用的滑块，它不支持图像中的文本（源代码已编译，因此我什至无法编辑它以满足我的需要），所以我决定自己制作。< / p>

在此方面的帮助以及使滑块bullet buttons起作用的过程将受到赞赏，因为我相信许多人都可以在其他地方使用它。它目前非常基本且轻巧，这就是我要保留它而不使用任何其他大型库或插件的方式。