Kayan slider modülü yapmak. scrollLeft sorunu nasıl aşabilirim?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<style>

.kayan_slider_dis{
display:block;
float:left;
margin:0px;
padding:0px;
width:622px;
height:205px;
border:1px solid #D4D4D4;
border-left:none;
border-right:none;

}
 .ok{
    display:block;
    float:left;
    margin:0px;
    padding-top:85px;
    width:30px;
    height:120px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #D4D4D4;
    border-left-color: #D4D4D4;
    cursor:pointer;
    background-color:#000000;
    color:#FFFFFF;

}
.ana_slider_dis{
display:block;
float:left;
margin-top:15px;
padding:0px;
width:558px;
height:203px;
}

.tum_slider_veri{
display:block;
float:left;
margin:0px;
padding:0px;
width:1500px;
height:197px;
margin-top:5px;
margin-bottom:5px;
margin-left:10px;

}
.kare{
display:block;
float:left;
padding :15px;
margin: 15px;
border: 1px solid #ddd;
width:80px;
height:100px;

}
</style>

<script type="text/javascript">
$(document).ready(function(){
    var scrollLeft_x = 0;
$("#sol_ok").on("click",function(){
     scrollLeft_x += 120;
    $(".ana_slider_dis").animate({scrollLeft : scrollLeft_x+"px"},500);
}); 

});
</script>

<div class="kayan_slider_dis">
<div id="sol_ok" class="ok">Sol Ok</div>
<div class="ana_slider_dis">

<div class="tum_slider_veri">
    <div class="kare"> Kare 1 </div>
    <div class="kare"> Kare 2 </div>
    <div class="kare"> Kare 3 </div>
    <div class="kare"> Kare 4 </div>
    <div class="kare"> Kare 5 </div>
    <div class="kare"> Kare 6 </div>
    <div class="kare"> Kare 7 </div>
    <div class="kare"> Kare 8 </div>
    <div class="kare"> Kare 9 </div>
    <div class="kare"> Kare 10 </div>
</div>
</div>
<div id="sol_ok" class="ok">Sağ Ok</div>
</div>

</div>