var interval;

function slideSwitch() {
  var $active = $('#slides div.active');
  if ( $active.next().length > 0 ) {
    var $next = $active.next();
  } else {
   var $next = $('#slides div:first');
  }
  $active.addClass('last-active');
  $next.hide().addClass('active').fadeIn( 1000, function() {
    $active.removeClass('active last-active');
  });
  $('#tab-' + $active.attr('id').split('-')[1]).removeClass('active');
  $('#tab-' + $next.attr('id').split('-')[1]).addClass('active');
}

$(document).ready(function(){
  $('#slides div:first-child').addClass('active');
  $('#tab-' + $('#slides div:first-child').attr('id').split('-')[1]).addClass('active');
  interval = setInterval( "slideSwitch()", 5000 );
  
  $('#slide-tabs li').click(function(){
    clearInterval(interval);
    $('#slides div').removeClass('active');
    $('#slide-tabs li').removeClass('active');
    $('#slide-' + $(this).attr('id').split('-')[1]).addClass('active');
    $(this).addClass('active');
  });
});