Как сделать jQuery плавно прокруткой к постоянно меняющейся позиции?

Question

Я пытаюсь сделать слайдер изображения, черпая вдохновение от this site.

У меня это работает, но я не могу понять, как сделать его плавно скользить между позициями; Если я просто использую jQuery .animate(), то он беспорядочно дергается, предположительно, пытается сыграть в догоняние с постами в очереди.

Как плавно скользить между точками на ползунке?

JSFiddle Version

HTML:

<div id="slider"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
    <img src="http://placekitten.com/100/80"> 
</div> 

CSS:

#slider{ 
    width: 550px; 
    height:134px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 
#slider img { 
    border: 1px Solid #282828; 
    margin: 16px 6px 16px 10px; 
    padding:0; 
} 
#slider img:hover{ 
    border: 1px Solid #eee; 
} 

JQuery:

$("#slider").mousemove(function(e) { 
    var sidePadding = 50; 
    var parentOffset = $(this).offset(); 
    var relX = e.pageX - parentOffset.left; 
    var scrollX = ((relX - sidePadding)/($(this).width() + sidePadding)) * ($(this).prop('scrollWidth')); 

    $(this).scrollLeft(scrollX); 
}); 

Answer 1

Самый простой способ сделать это было бы добавить к position: relative; изображения и заменить scrollLeft() на $(this).children().stop().animate({ left: (-1*scrollX) + 'px' }, 600, 'swing');

Вам также придется удалить панель прокрутки браузера, но это должно быть легко, установив overflow: hidden; на родительский div.

http://jsfiddle.net/ENhwT/41/

Answer 2

Используйте гибкий слайдер для более плавной прокрутки. Добавьте move:1 в функцию слайдера.

<script type="text/javascript"> 
$(function(){ 
    SyntaxHighlighter.all(); 
}); 

$(window).load(function(){ 
    $('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    itemWidth: 210, 
    itemMargin: 5, 
    minItems: 5, 
    smoothHeight: false, 
    move:1, 
    start: function(slider){ 
     $('body').removeClass('loading'); 
    } 
    }); 
});