使用Velocity.js构建无限旋转图像转盘，

Question

我试图建立一个无限旋转的图像转盘，尝试可以在这里看到：http://2017.app.envisic.nl/wordpress

我想要4个水平条（class =＆＃34; mosaic-bar＆＃34;）和tile（class =＆＃34; tile＆＃34;）以不同的速度向右滑动。当用户调整大小时，应相应调整所有图像的大小。这样可行。但是，infinate幻灯片没有。我的方法是每个条形图都应设置动画，以向右滑动1 x宽度的图块。完成后，最右边的图块应该向左移动，然后整个事情重新开始。我做错了什么？

代码：

$(document).ready(function() {

var slideInterval;
var winHeight = 0;
var tileDim = 0;

function tileSlider() {

    winHeight = $(window).height();
    tileDim = winHeight / 4;

    //Set tile dimensions
    $(".tile").css( {'height': tileDim + 'px', 'width': tileDim + 'px'} );

    //Animate each bar to slide right
    function slide() {
        $(".mosaic-bar").each(function() {
            $(this).removeAttr('style');
            var t = Math.floor(Math.random() * 9000) + 2000
            var self = this;

            //Move each bar to the right 1 tile
            function s() {
                $(self).velocity(   {
                                    translateX: tileDim 
                                } , { 
                                    duration: t, 
                                    easing: "linear", 
                                    complete: function() {
                                        //On complete, move tile on the right to the left
                                        $(self).append($(self).children(".tile").first());
                                        //Reset the animation
                                        $(self).removeAttr('style');
                                    }
                                });
            }

            //Then call the function to instantly start the animation, and then loop it
            s();
            slideInterval = setInterval(function() { s(); }, t + 1);
        });
    }
    slide();
};


tileSlider();

$(window).resize(function() {
    tileSlider();
});

}）;