supersimplegallery

foo.html

<script>
    $('.carousel').each(function() {
      var gallery = $(this);
      var list = $(this).find(".gallery");
      
      list.find('li:first').addClass('active');
      list.find('li:not(:first)').addClass('startright');
      var indicators = $(this).find(".indicators");
      
      var startTime = 0;
      
      function nextItem() {
        startTime = new Date().getTime();
        
        var next = list.find('.active').next();
        next = next.length ? next : list.find('li:first');
        if (next[0] == list.find('li:first')[0]) {
          list.find('li:first').removeClass('startright isleft isright').addClass('active');
          list.find('li:not(:first)').removeClass('startright isleft isright active').addClass('isright');
        } else {  
          list.find('.active').removeClass('active').addClass('isleft');
          next.removeClass('isleft isright startright').addClass('active'); 
        }
        updateIndicators();
      }
      
      function prevItem() {
        startTime = new Date().getTime();
        
        var prev = list.find('.active').prev();
        prev = prev.length ? prev : list.find('li:last');
        if (prev[0] == list.find('li:last')[0]) {
          list.find('li:last').removeClass('startright isleft isright').addClass('active');
          list.find('li:not(:last)').removeClass('startright isleft isright active').addClass('isleft');
        } else {
          list.find('.active').removeClass('startright active').addClass('isright');
          prev.removeClass('isleft isright startright').addClass('active'); 
        }
 
        updateIndicators();
      }
      
      function updateIndicators() {
        var index = list.find('.active').index();
        indicators.find('.active').removeClass('active');
        indicators.find('li').eq(index).addClass('active');
      }
 
      var timer = setInterval(nextItem, 5000);
      updateIndicators();
 
      gallery.find('.next-item').click(function(e) {
        if (new Date().getTime() - startTime < 2000) return false;
        
        e.preventDefault();
        clearInterval(timer);
        nextItem();
      });
 
      gallery.find('.prev-item').click(function(e) {
        if (new Date().getTime() - startTime < 2000) return false;
        
        e.preventDefault();
        clearInterval(timer);
        prevItem();
      });
    });
    </script>