Carousel w/out plugin

by Sparrow Squire

HTML

<a href="javascript:void(0);" class="btnBackward">Backward</a>
<a href="javascript:void(0);" class="btnForward">Forward</a>
<div class="jquery-carousel">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
  </ul>
</div>

CSS

.jquery-carousel {
  position: relative;
  padding-top: 20px;
  overflow: hidden;
  width: 306px;
  height: 50px;
}

.jquery-carousel ul {
  position: relative;
  height: 50px;
  list-style: none;
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.jquery-carousel ul li {
  position: absolute;
  float: left;
  margin-right: 1px;
  background: #CCCCCC;
  width: 50px;
  height: 25px;
  text-align: center;
  padding-top: 25px;
}

JavaScript

$(function() {
  var carSlide = $('.jquery-carousel ul');
  var carSlideChild = carSlide.find('li');
  var NumberOfClick = 0;
  var isClick = true;
  /*Adding 1px margin to Carousel Slide*/
  itemLength = carSlide.find('li:first').width() + 1;

  carSlide.width(itemLength * carSlideChild.length);
  refreshPosition();

  $('.btnForward').click(function() {
    if (isClick) {
      isClick = false;
      NumberOfClick++;

      carSlide.stop(false, true).animate({
        left: '-=' + itemLength
      }, 300, function() {
        lastItem = carSlide.find('li:first');
        lastItem.remove().appendTo(carSlide);
        lastItem.css('left', ((carSlideChild.length - 1) * (itemLength)) + (NumberOfClick * itemLength));
        isClick = true;
      });
    }
  });

  $('.btnBackward').click(function() {
    if (isClick) {
      isClick = false;
      NumberOfClick--;
      lastItem = carSlide.find('li:last');
      lastItem.remove().prependTo(carSlide);

      lastItem.css('left', itemLength * NumberOfClick);
      carSlide.finish(true).animate({
        left: '+=' + itemLength
      }, 300, function() {
        isClick = true;
      });
    }
  });

  function refreshPosition() {
    carSlideChild.each(function() {
      $(this).css('left', itemLength * carSlideChild.index($(this)));
    });
  }
});