jquery滑块导航与mousemove问题

Question

我写了一个jquery滑块，这是笔：https://codepen.io/mhbitarafan1375/pen/mKWdPq
我不明白它的问题是什么;当我将鼠标向左移动时，幻灯片有时会向左移动，有时会向右移动，当我将鼠标向右移动时也会发生这种情况。我需要帮助才能找到解决方案。

HTML

<ul id="Slider">
<a href="#"><li class="sprite">1</li></a>
<a href="#"><li class="sprite">2</li></a>
<a href="#"><li class="sprite">3</li></a>
<a href="#"><li class="sprite">4</li></a> 
</ul>

JS

var mouseClicked,sLeft,currentX,itemWidth;
itemWidth = jQuery('.sprite').width() + 10;
jQuery('#Slider').on({
mousedown: function(e){
mouseClicked = true;
currentX = e.pageX;
sLeft = jQuery('#Slider').scrollLeft();
},
'mouseup mouseleave': function(e){
mouseClicked = false;
},
mousemove: function(e){
if(mouseClicked){
if (currentX <= e.pageX){
jQuery('#Slider').animate({scrollLeft: sLeft+itemWidth},500);
}
else{
jQuery('#Slider').animate({scrollLeft: sLeft-itemWidth},500);
}
mouseClicked = false;
}
}
})