Горизонтальный слайдер на Jquery

var view = $("#tslshow"); 
var rightArrow = $("#rightArrow"); 
var leftArrow = $("#leftArrow"); 
var move = "100px"; 
var sliderLimit = -750; 
var fullWeight = 0; 
 
$('#tslshow li').each(function() { 
	fullWeight+=$(this).width(); 
}); 
 
if(fullWeight < $('#viewContainer').width()) { 
	rightArrow.addClass('hide'); 
	leftArrow.addClass('hide'); 
} else { 
	rightArrow.removeClass('hide'); 
	leftArrow.removeClass('hide'); 
} 
 
rightArrow.click(function(){ 
    var currentPosition = parseInt(view.css("left")); 
    if (currentPosition >= sliderLimit) { 
		view.stop(false,true).animate( 
			{left:"-="+move}, 
			{duration: 400} 
		)	 
	} 
}); 
 
leftArrow.click(function(){ 
    var currentPosition = parseInt(view.css("left")); 
    if (currentPosition < 0) { 
		view.stop(false,true).animate( 
			{left:"+="+move}, 
			{duration: 400} 
		) 
	} 
});

.bstimeslider { 
width: 100%; 
height:40px; 
background:#fff; 
position:relative;     
} 
 
.bktibx { 
     
float:left; 
margin:0px 0px 0px 10px; 
font-size:18px; 
display:block; 
background:red; 
color:#fff; 
     
} 
 
#tslshow { 
position:absolute; 
left:0; 
width:1200px; 
    
} 
 
#leftArrow { 
     
width:20px; 
height:20px; 
position:absolute; 
top: 20px; 
left:0px; 
} 
 
#rightArrow { 
     
width: 20px; 
height: 20px; 
position: absolute; 
top: 20px; 
right:0px; 
} 
 
#leftArrow.hide, #rightArrow.hide { 
display: none; 
} 
 
#viewContainer { 
width:95%; 
height:100%; 
background:#ffffff; 
position:absolute; 
left:20px; 
overflow:hidden;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="tabs small-tabs bstimeslider"> 
  <div id="rightArrow"><img src="images/arrow_right.png" width="20" height="20" /></div> 
  <div id="viewContainer"> 
    <div id="tslshow"> 
      <li class="active bktibx"><a href="#tabTaglia1" data-id="tabTaglia1"><span>Taglia S</span></a> </li> 
      <li class="bktibx"><a href="#tabTaglia2" data-id="tabTaglia2"><span>Taglia M</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
      <li class="bktibx"> <a href="#tabTaglia3" data-id="tabTaglia3"><span>Taglia L</span></a> </li> 
    </div> 
  </div> 
  <div id="leftArrow"><img src="images/arrow_left.png" width="20" height="20" /></div> 
</ul>