水平动画自动滚动

Question

我有此水平可拖动滚动条。 现在我要做的是，该元素从右向左缓慢移动到整个元素的末端，并在鼠标悬停时停止。 该元素的宽度大于窗口宽度。

这是元素的代码以及如何将其拖动。

<div id="horizontal-wrapper">
<div id="horizontal-scroll" class="draggable ui-widget-content ui-draggable" >
<div class="img-scroll"> </div> 
<div class="img-scroll"> </div> 
<div class="img-scroll"> </div> 
<div class="img-scroll"> </div>                                      
</div>
</div>

function horizontalSlider() {
var width = 0;
var wwidth = window.innerWidth;
$('.img-scroll').each(function () {
    width += $(this).outerWidth(true);

});
var widthmax = width - wwidth;
$('#horizontal-scroll').css('width', width);
$('#horizontal-scroll').css('left', -wwidth + 200);
$("#horizontal-wrapper").css("left","100%");    
if ( $( ".draggable" ).length ) {
$( ".draggable" ).draggable({
          axis: "x",
          containment: [-widthmax,0,0,0]

});
}   
}


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

$(document).ready(function () {
resizeSlider();     
});

我使用了不同的方法，但是没有任何效果。 有人可以帮我吗？