How To Make The Animate Jquery Method Stop At End Of Div?

I am trying to create a customized carousel and it already has the following features: You can move left and right with the mouse or by swipe on mobile/tablets. You can move left

Solution 1:

something like

   pos=slides=$(".wrapper > div").length;

   $("#left").click(function() {
    if(pos>3){$(".wrapper").stop(true, true).animate({left: "-=125px"}, 500);pos--;}
   });

   $("#right").click(function() {
    if(pos<slides){$(".wrapper").stop(true, true).animate({left: "+=125px"}, 500);pos++;}
   });

   $('.carousel').kinetic();

Solution 2:

There are some things to consider when doing carousel, I'll just get you started.

1. Will all items be the same width
2. Will all items have same margins
3. Will the things above be variable

It we presume that all the things above are static, the idea is for the scroll to right to not happen if the left position of wrapper is 0. And that's the easy part. For the other direction you have to take the number of all items, subtract the number of visible items (in your case 3) , multiply that by their width (including the margin) and all this providing all items are same width and with same margin .. and in the end you have to multiply that by -1, because your wrapper's left position becomes negative number. And in the end, if wrapper reached that position, you should not scroll it. A visualization of the above mini-wall of text:

http://jsfiddle.net/vnkRw/4/