How to detect that the last or 1st list item is displayed in its container with javascript/jquery

Question

I'm doing a carousel for the 1st time and I'm having difficulties to detect when the last or 1st <li> in the list is displayed in the viewport (its container). I want that when the last item is displayed to either disable the next or previous buttons, or to continue from the 1st or vice-versa (I haven't decided yet on what should happen...). And no plugins please, I'm still in my learning phase...

JSFiddle: http://jsfiddle.net/aayPV/

var slidesList = $('#slides').find('ul'),
    slide = $('#slides li');

slidesList.css('width', (slide.length * slide.outerWidth(true)));

$('#ctrls').delegate('a', 'click', function(e) {
  var thisElem = $(this),
      lastLiPos = slidesList.find('li:last').position(),
      lastLiPosLeft = lastLiPos.left,
      lastLiPosTop = lastLiPos.top;

  e.preventDefault();

  if (thisElem.hasClass('next')) {
    slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);
    if ($('#slides li:last').position().left < ((slide.length * slide.outerWidth(true)) - (slide.outerWidth(true) * 5))) {
        //Disable nextbutton
    }
  } else if (thisElem.hasClass('prev')) {
    slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);

    //If 1st item is displayed, disable prev button
  }
});

HTML:

<div id="carousel">
  <div id="ctrls">
    <a href="#" class="prev">Prev</a>
    <a href="#" class="next">Next</a>
  </div>

  <div id="slides">
     <ul>
       <li><p>1</p></li>
       <li><p>2</p></li>
       <li><p>3</p></li>
       <li><p>4</p></li>
       <li><p>5</p></li>
     </ul>
  </div>
</div>

CSS:

#ctrls {
    margin-bottom: 10px;
}

#slides {
    width: 305px;
    border: 1px solid #555;
    overflow: hidden;
}
#slides li {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    background: #e5e5e5;
    float: left;
    color: #777;
}
#slides li p {
    font-family: arial, tahoma;
    font-size: 46px;
    font-weight: bold;
    text-align: center;
    margin-top: 25%;
}

Many thanks

Answer 1

NEW UPDATED ANSWER

I've updated your fiddle... for reference http://jsfiddle.net/aayPV/22/

I think checking on the value of a single variable will be alot more efficient than checking the position of the slide against the length of the total slider...

var slidesList = $('#slides').find('ul'),
    slide = $('#slides li');

slidesList.css('width', (slide.length * slide.outerWidth(true)));

var i=0,
    last = slide.length - 3;

$('#ctrls').delegate('a', 'click', function(e) {
    var thisElem = $(this),
        lastLiPos = slidesList.find('li:last').position(),
        lastLiPosLeft = lastLiPos.left,
        lastLiPosTop = lastLiPos.top;


    console.log(lastLiPosLeft, '\n', slidesList.position().left);

    e.preventDefault();

    if (thisElem.hasClass('next')) {
        if(i==last) {
             alert('end'); return false;
        } else {
            ++i;
            slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);
        }
    } else {
        if (thisElem.hasClass('prev')) {
            if(i==0) {
                 alert('beginning'); return false;
            } else {
                --i;
                slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);
            }
        }
    }
});

---

OLD ORIGINAL ANSWER

http://jsfiddle.net/YmjF7/31/

var items = $('li');

var i = 0,
    last = items.length -1;

$('#next').click(function(){
    //increment i until it reaches the end of the array
    if(i == last) {alert('end'); return false;} else {
        i++;
        i = i % items.length;
        alert('Item '+ (i+1));
    }
});

$('#prev').click(function(){
    //decrease i until it reaches the beginning of the array
    if(i == 0) {alert('beginning'); return false;} else {
        --i;
        i = i % items.length;
        alert('Item '+ (i+1));
    }
});

I give some credit to the following questions/answers:

Increase and decrease a variable until a number is reached in javascript

jQuery append different text each click

Answer 2

I hope below codes will help you,

if (thisElem.hasClass('next')) {
    if(lastLiPosLeft >= 2 )  { //I have edited this line changed >=0 to >=2
    slidesList.animate({ marginLeft: '-=' + slide.outerWidth(true) + 'px' }, 300);

    }
    else  {
        $(".next").css('display', 'none');
    }
} else if (thisElem.hasClass('prev')) {
    //if(  ) //this is for previous button
    slidesList.animate({ marginLeft: '+=' + slide.outerWidth(true) + 'px' }, 300);

same condition take for right position and fix for previous button.

I have tested for Next.