I am trying to create a simple Carousel slider at This Demo. As you can see the slider works fine! but I do not know how to stop it at both end(left and right) side. I mean how can I control to disable the left btn when the first child of ul is the first displaying( visible) item at left and disable the Right btn while the last child of <ul> is rendering in the .well box?

Here is the simple code which I have so far:

1. $(".leftslide").on("click",function(){
      $(".list-inline").animate({left:'-=187px'}, 300);  
   });
   $(".rightslide").on("click",function(){
      $(".list-inline").animate({left:'+=187px'}, 300);  
   });
   
   var maginLeft =  $("ul>:first-child").css("marginLeft");
   var maginRight = $("ul>:last-child").css("marginRight");
   
   alert(maginLeft + maginRight );
   
   
   
   
   
   
   
   
   
   

1. ar maginLeft = $("ul>:first-child").css("marginLeft"); 

Thanks,