Carousel with prev, next buttons

buttons disabled when no items are further present

HTML

<div class="slideshow">
 <div class="controls">
    <a href="#" class="prev">-</a>
       
    <a href="#" class="next">+</a>
  </div>  
  <div class="slide-wrapper">
     <h3>Some title here <span class="pagecount"></span></h3>
    <ul>
        <li class="slide">
            
            <article>
              <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>

        <li class="slide">
            <article>
                <p>Over the past few years, mobile web usage has considerably increased.</p>
            </article>
        </li>
     </ul>
</div>
</div>

CSS

.slideshow {
      margin: 45px auto 0;
      width: 318px;
}

.slideshow .slide-wrapper {
    width:325px;
    padding: 10px;
    overflow: hidden;
}

.slideshow ul {
    width: 696px;
}

.slideshow .slide {
    float: left;
    margin-right: 30px;
}

.slideshow .slide article {
    background: #fff;
    bottom: 0px;
    box-shadow: -2px -1px 8px #bbb;
    padding: 10px;
    width: 298px;
    z-index: 5;
}

.controls {
    position: relative;
    top: 10px;
}

.controls a {
    color: #fff;
    display: block;
    font-weight: bold;
    height: 20px;
    position: absolute;
    top:0px;
    width: 20px;
    background-color: #000;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
}

.controls .prev {
    left: -15px;
}

.controls .next {
    right: -15px;
}

a.disabled{
    cursor: default;
    background-color: #d6d6d6;
}

JavaScript

(function( $ ) {
    
    $.fn.projectCarousel = function(){
        var $slides = $(".slide", this),
            $current_slide = $(".slide:first-child", this),
            $prev = $(".controls a.prev", this),
            $next = $(".controls a.next", this);
 $('.slide-wrapper').find('.pagecount').html($current_slide.index()+1 +"of"+$slides.length);
        
 if($current_slide.index() <= 0) $prev.addClass("disabled");
      $prev.click(function(e){
            e.preventDefault();
            
            if($current_slide.index() > 0){
                //$current_slide.find('.pagecount').html($current_slide.index()+1 +"of"+$slides.length);  
                if($prev.hasClass("disabled")) $prev.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '+=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.prev();
            }
            
            if($current_slide.index() <= 0){
                //disable previous
                $prev.addClass("disabled");
                $next.removeClass("disabled");
            }
        });
        
        $next.click(function(e){
            e.preventDefault();
            
            if($current_slide.index() < $slides.index()){
                //$current_slide.find('.pagecount').html($current_slide.index()+1 +"of"+$slides.length); 
                if($next.hasClass("disabled")) $next.removeClass("disabled");
                $(".slide-wrapper ul").animate({ marginLeft: '-=' + $current_slide.outerWidth(true)+ 'px' });
                $current_slide = $current_slide.next();
            }
            
            if($current_slide.index() >= $slides.index()){
                //disable next
                 $('.slide-wrapper').find('.pagecount').html($current_slide.index()+1 +"of"+$slides.length);
                $next.addClass("disabled");
                $prev.removeClass("disabled");
            }
        });
        
    }
})( jQuery...