sciolist/karusell.css

## karusell.css
.karusell {
    position: relative;
    overflow: hidden;
}

.karusell .page.next { z-index: 3; }
.karusell .page.current { z-index: 2; }
.karusell .page {
    position: absolute;
    background: black;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

## karusell.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="Stylesheet" type="text/css" href="karusell.css" />
    <style type="text/css">
      #carousel { position: relative; cursor: pointer; width: 1000px; height: 350px; }
      #carousel .description { position: absolute; height: 30px; bottom: 0; left: 0; right: 0; color: #DDD; padding: 8px; background: #333; }
    </style>
  </head>
  <body>
    <div id="carousel">
      <div class="page">
        <img src="http://placekitten.com/1000/300" />
        <div class="description">Colorful kitten page.</div>
      </div>
      <div class="page">
        <img src="http://placekitten.com/g/1000/300" />
        <div class="description">Black and white kitten page.</div>
      </div>
      <div class="page">
        <img src="http://placekitten.com/g/1000/600" />
        <div class="description">Black and white kitten page 3.</div>
      </div>
      <div class="page">
        <img src="http://placekitten.com/g/1000/400" />
        <div class="description">Black and white kitten page 4.</div>
      </div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="karusell.js"></script>
    <script type="text/javascript">
      $("#carousel").karusell();
      $("#carousel").click(function() { $(this).karusell().nextPage(); });
    </script>
  </body>
</html>

## karusell.js
(function(jQuery) {
    function Karusell(em, opts) {
        this.element = $(em).addClass("karusell");
        this.opts = jQuery.extend({
            delay: 10000,
            easing: "easeInOutQuint",
            transitionSpeed: 500,
            transitionNext: "right",
            transitionPrevious: "left",
            pageSelector: ".page"
        }, opts);
        this.setup();
    }
    Karusell.transitions = {
        right: function(karusell, current, next, cb) {
            next.css({ left: current.width() });
            next.animate({ left: "-=" + current.width(), easing: { left: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
        },
        left: function(karusell, current, next, cb) {
            next.css({ left: -current.width() });
            next.animate({ left: "+=" + current.width(), easing: { left: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
        },
        fade: function(karusell, current, next, cb) {
            next.css({ opacity: 0 });
            next.animate({ opacity: 1, easing: { opacity: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
        }
    };
    jQuery.extend(Karusell.prototype, {
        setup: function() {
            var self = this;
            this.element.hover(
                function() { clearTimeout(self._timer); self._paused = true; },
                function() { self._paused = false; if(!self._running) { self.start(); } }
            );
            this.start();
        },
        start: function() {
            var self = this;
            clearTimeout(this._timer);
            if(this._running || this._paused) { return; }
            this._timer = setTimeout(function() {
                self.nextPage(true);
            }, this.opts.delay);
        },
        previousPage: function() { return this.toPage(this.currentIndex() - 1, true); },
        nextPage: function() { return this.toPage(this.currentIndex() + 1, false); },
        pages: function() { return this.element.find(">*").filter(this.opts.pageSelector); },
        currentPage: function() { var pages = this.pages(); return pages.filter(".current").add(pages.last()).first(); },
        currentIndex: function() { return this.pages().index(this.currentPage()); },
        toPage: function(idx, reverse) {
            if(this._running) { return; }
            clearTimeout(this._timer);

            var pages = this.pages().stop(false, true);
            while(idx >= pages.length) { idx -= pages.length; }
            while(idx < 0) { idx += pages.length; }

            var current = this.currentPage();
            var next = $(pages[idx]);
            if(next[0] === current[0]) { return; }
            var transition = Karusell.transitions[reverse ? this.opts.transitionPrevious : this.opts.transitionNext];

            var self = this;
            if(this._running) { return; }
            this._running = true;
            next.addClass("next");
            transition(this, current, next, function() {
                self._running = false;
                next.removeClass("next").addClass("current");
                current.removeClass("current");
                self.start();
            });
        }
    });
    jQuery.fn.karusell = function(opts) {
        var key = "karusell";
        for(var i=0; i<this.length; ++i) {
            var em = this[i];
            var karusell = jQuery.data(em, key);
            if(karusell === undefined) {
                karusell = new Karusell(this, opts);
                jQuery.data(em, key, karusell);
            }
            if(opts instanceof Function) opts.call(this, karusell);
            else if(karusell[opts] !== undefined) karusell[opts]();
        };
        return this;
    };
    jQuery.fn.karusell.transitions = Karusell.transitions;
})(jQuery);
	.karusell {
	position: relative;
	overflow: hidden;
	}

	.karusell .page.next { z-index: 3; }
	.karusell .page.current { z-index: 2; }
	.karusell .page {
	position: absolute;
	background: black;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="Stylesheet" type="text/css" href="karusell.css" />
	<style type="text/css">
	#carousel { position: relative; cursor: pointer; width: 1000px; height: 350px; }
	#carousel .description { position: absolute; height: 30px; bottom: 0; left: 0; right: 0; color: #DDD; padding: 8px; background: #333; }
	</style>
	</head>
	<body>
	<div id="carousel">
	<div class="page">
	<img src="http://placekitten.com/1000/300" />
	<div class="description">Colorful kitten page.</div>
	</div>
	<div class="page">
	<img src="http://placekitten.com/g/1000/300" />
	<div class="description">Black and white kitten page.</div>
	</div>
	<div class="page">
	<img src="http://placekitten.com/g/1000/600" />
	<div class="description">Black and white kitten page 3.</div>
	</div>
	<div class="page">
	<img src="http://placekitten.com/g/1000/400" />
	<div class="description">Black and white kitten page 4.</div>
	</div>
	</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="karusell.js"></script>
	<script type="text/javascript">
	$("#carousel").karusell();
	$("#carousel").click(function() { $(this).karusell().nextPage(); });
	</script>
	</body>
	</html>
	(function(jQuery) {
	function Karusell(em, opts) {
	this.element = $(em).addClass("karusell");
	this.opts = jQuery.extend({
	delay: 10000,
	easing: "easeInOutQuint",
	transitionSpeed: 500,
	transitionNext: "right",
	transitionPrevious: "left",
	pageSelector: ".page"
	}, opts);
	this.setup();
	}
	Karusell.transitions = {
	right: function(karusell, current, next, cb) {
	next.css({ left: current.width() });
	next.animate({ left: "-=" + current.width(), easing: { left: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
	},
	left: function(karusell, current, next, cb) {
	next.css({ left: -current.width() });
	next.animate({ left: "+=" + current.width(), easing: { left: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
	},
	fade: function(karusell, current, next, cb) {
	next.css({ opacity: 0 });
	next.animate({ opacity: 1, easing: { opacity: karusell.opts.easing } }, karusell.opts.transitionSpeed, cb);
	}
	};
	jQuery.extend(Karusell.prototype, {
	setup: function() {
	var self = this;
	this.element.hover(
	function() { clearTimeout(self._timer); self._paused = true; },
	function() { self._paused = false; if(!self._running) { self.start(); } }
	);
	this.start();
	},
	start: function() {
	var self = this;
	clearTimeout(this._timer);
	if(this._running \|\| this._paused) { return; }
	this._timer = setTimeout(function() {
	self.nextPage(true);
	}, this.opts.delay);
	},
	previousPage: function() { return this.toPage(this.currentIndex() - 1, true); },
	nextPage: function() { return this.toPage(this.currentIndex() + 1, false); },
	pages: function() { return this.element.find(">*").filter(this.opts.pageSelector); },
	currentPage: function() { var pages = this.pages(); return pages.filter(".current").add(pages.last()).first(); },
	currentIndex: function() { return this.pages().index(this.currentPage()); },
	toPage: function(idx, reverse) {
	if(this._running) { return; }
	clearTimeout(this._timer);

	var pages = this.pages().stop(false, true);
	while(idx >= pages.length) { idx -= pages.length; }
	while(idx < 0) { idx += pages.length; }

	var current = this.currentPage();
	var next = $(pages[idx]);
	if(next[0] === current[0]) { return; }
	var transition = Karusell.transitions[reverse ? this.opts.transitionPrevious : this.opts.transitionNext];

	var self = this;
	if(this._running) { return; }
	this._running = true;
	next.addClass("next");
	transition(this, current, next, function() {
	self._running = false;
	next.removeClass("next").addClass("current");
	current.removeClass("current");
	self.start();
	});
	}
	});
	jQuery.fn.karusell = function(opts) {
	var key = "karusell";
	for(var i=0; i<this.length; ++i) {
	var em = this[i];
	var karusell = jQuery.data(em, key);
	if(karusell === undefined) {
	karusell = new Karusell(this, opts);
	jQuery.data(em, key, karusell);
	}
	if(opts instanceof Function) opts.call(this, karusell);
	else if(karusell[opts] !== undefined) karusell[opts]();
	};
	return this;
	};
	jQuery.fn.karusell.transitions = Karusell.transitions;
	})(jQuery);