A simple example of javascript

carousel.js

var bitmama = (function($){

  var bitmama = window.bitmama || {};
  
  var VIEWPORT = '.carousel_contents_bitmama, .carousel_contents_long_bitmama',
      SLIDE = '.carousel_scroll_block_bitmama',
      CONTENT = '.bol_box_threecols, .bol_box_fourcols',
      CONTENT_BLOCK = '.bol_box_threecols div, .bol_box_fourcols div',
      PAGERS = '.carousel_pager_bitmama a',
      ACTIVE = 'active',
      PREV = '.carousel_bt_prev_bitmama a',
      NEXT = '.carousel_bt_next_bitmama a',
      DURATION_DIV = 166,
      DURATION_TIME = 260
      ;

  bitmama.carousel = function(el){
    this.el = el;
    this.$ = function(arg){
      return $(arg, this.el);
    };
    this.bindAll();
    this.initialize();
  };

  bitmama.carousel.prototype.initialize = function(){
    var content = this.$(CONTENT),
        slide = this.$(SLIDE)
        ;

    this.curPage = 0;
    this.initialOffset = slide.position().left;
    this.viewportSize = this.$(VIEWPORT).innerWidth() - this.initialOffset;
    this.contentSize = content.length * content.outerWidth();
    this.pageCount = Math.ceil(this.contentSize / this.viewportSize) - 1;
    
    var maxHeight=0;
    this.$(CONTENT_BLOCK).each(function(){
      var height = $(this).height();
      if(height > maxHeight)
        maxHeight = height;
    });

    this.$(CONTENT_BLOCK).css({height:maxHeight});

    this.$(VIEWPORT).css({height:slide.height()});
  };

  bitmama.carousel.prototype.nextPage = function(){
    this.curPage++;
    if(this.curPage > this.pageCount)
      this.curPage = 0;

    this.animate();
  };

  bitmama.carousel.prototype.prevPage = function(){
    this.curPage--;
    if(this.curPage < 0)
      this.curPage = this.pageCount;

    this.animate();
  };
  
  bitmama.carousel.prototype.gotoPage = function(page){
    if(page < 0){
      page = 0;
    }
    if(page > this.pageCount){
      page = this.pageCount;
    }
    this.curPage = page;
    
    this.animate();
  };

  bitmama.carousel.prototype.animate = function(){
    var slide = this.$(SLIDE),
        currentLeft = slide.position().left,
        nextLeft = this.initialOffset - (this.curPage * this.viewportSize),
        pager = this.$(PAGERS)
        ;
        
    if(this.contentSize + nextLeft < this.viewportSize + this.initialOffset){
      nextLeft = this.initialOffset - this.contentSize + this.viewportSize;
    }
    
    var duration = (1 + Math.log(Math.abs(currentLeft - nextLeft) / DURATION_DIV)) * DURATION_TIME;

    pager.removeClass(ACTIVE);
    pager.eq(this.pageCount - this.curPage).addClass(ACTIVE);

    slide.animate({left:nextLeft}, duration, 'easeInOutCubic');
  };

  bitmama.carousel.prototype.bindAll = function(){
    var c = this;
    
    this.$(NEXT)
      .unbind('click.carousel')
      .bind('click.carousel', function(){
        c.nextPage();
        return false;
      });

    this.$(PREV)
      .unbind('click.carousel')
      .bind('click.carousel', function(){
        c.prevPage();
        return false;
      });

    this.$(PAGERS)
      .unbind('click.carousel')
      .bind('click.carousel', function(){
        c.gotoPage(c.pageCount - c.$(PAGERS).index(this));
        return false;
      });
  };

  return bitmama;

})(jQuery);