Carousel (own) v1

with fade & slide (4dir) random start pause stop scroll-to scroll-by

HTML

<div id="moduleCarousel_12" class="moduleCarousel fade">
    <div style="background-color: #ff0000;">Eerste content</div>
    <div style="background-color: #ffff00;">Tweede content</div>
    <div style="background-color: #00ff00;">Derde content</div>
    <div style="background-color: #0000ff;">Vierde content</div>
</div>

<button onclick="$('.moduleCarousel > div').removeClass('prev active');">Geen</button>
<button onclick="carouselTo(12, 1);">1</button>
<button onclick="carouselTo(12, 2);">2</button>
<button onclick="carouselTo(12, 3);">3</button>
<button onclick="carouselTo(12, 4);">4</button>

<button onclick="carouselStart(12, 0, false);">Start at 0</button>
<button onclick="carouselStart(12, 0, true);">Start random at 0</button>
<button onclick="carouselBy(12, -1, false);">Prev</button>
<button onclick="carouselBy(12, -1, true);">Prev random</button>
<button onclick="carouselBy(12, +1, false);">Next</button>
<button onclick="carouselBy(12, +1, true);">Next random</button>
<button onclick="carouselPause(12);">Pause</button>
<button onclick="carouselStop(12);">Stop</button>

CSS

.moduleCarousel {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

.moduleCarousel > div {
    position: absolute;
    z-index: 1;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
	background-color: #fff;
	/* Chrome, Safari, Opera */
	-webkit-animation-name: none;
	-webkit-animation-duration: inherit;
	-webkit-animation-timing-function: ease;
	-webkit-animation-delay: 0s;
	/* Standard syntax */
	animation-name: none;
	animation-duration: inherit;
	animation-timing-function: ease;
	animation-delay: 0s;
}

.moduleCarousel.fade > div {
    opacity: 0;
}
.moduleCarousel.fade > div.prev {
    z-index: 2;
    opacity: 1;
}
.moduleCarousel.fade > div.active {
    z-index: 3;
    opacity: 1;
    -webkit-animation-name: fade;
    animation-name: fade;
}

.moduleCarousel.slide > div {
}
.moduleCarousel.slide > div.prev {
    z-index: 2;
}
.moduleCarousel.slide > div.active {
    z-index: 3;
}

.moduleCarousel.slide.left.fade > div.active {
    -webkit-animation-name: fade;
    animation-name: fade;
}

.moduleCarousel.slide.right.fade > div.active {
    -webkit-animation-name: fade;
    animation-name: fade;
}

.moduleCarousel.slide.up.fade > div.active {
    -webkit-animation-name: fade;
    animation-name: fade;
}

.moduleCarousel.slide.down.fade > div.active {
    -webkit-animation-name: fade;
    animation-name: fade;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fade {
    0% {opacity: 0; -moz-opacity: 0;}
    100% {opacity: 1; -moz-opacity: 1;}
}
/* Standard syntax */
@keyframes fade {
    0% {opacity: 0; -moz-opacity: 0;}
    100% {opacity: 1; -moz-opacity: 1;}
}

@-webkit-keyframes slide-left {
    0% {left: 100%;}
    100% {left: 1%;}
}
@keyframes slide-left {
    0% {left: 100%;}
    100% {left: 1%;}
}

@-webkit-keyframes slide-right {
    0% {left: -100%;}
    100% {left: 1%;}
}
@keyframes slide-right {
    0% {left: -100%;}
    100% {left:...

JavaScript

function Timer(callback, delay) {
    var timerId, start, remaining = delay;
    var origdelay = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    this.end = function() {
        window.clearTimeout(timerId);
        remaining = -1;
    };

    this.resume = function() {
        if (remaining>=0) {
            start = new Date();
            timerId = window.setTimeout(callback, remaining);
        }
    };

    this.restart = function() {
        if (remaining>=0) {
            start = new Date();
            timerId = window.setTimeout(callback, origdelay);
        }
    };

    this.resume();
}

/* new carousel script */
var carousel = [];
var carousel_interval = 5000;


var carousel_defaults = {
	"id": "",
	"timer": "",
	"fade": true,
	"slide": false,
	"direction": "left",
	"intertime": 3000,
	"duration": 1000,
	"random": false,
	"start": 0,
	"autostart": true,
	"infinite": true
};

function carouselInit(settings) {
	if (Object.prototype.toString.call( carousel[settings.id] ) === '[object Object]') {
		carousel[settings.id].timer.end();
	}
	carousel[settings.id] = settings;
	if (settings.autostart || true) {
		carouselStart(settings.id);
	}
	return false;
}

function carouselStart(car) {
    var max = $("#moduleCarousel_"+car+" > div").length;
    if (max>1) {
        var iscur = $("#moduleCarousel_"+car+" > div.active").length;
        var cur = (iscur>0) ? ($("#moduleCarousel_"+car+" > div").index($("#moduleCarousel_"+car+" > div.active"))+1): max;
        var next = (cur+1);
        
        if (carousel[car].random) {
            next = Math.floor((Math.random() * max) + 1);
            next = (cur==next)? (next+1): next;
        } else if (!carousel[car].infinite && next>max) {
        	carouselStop(car);
        	return false;
        }
        next = (next>max)? 1: next;
        
        if (Object.prototype.toString.call( carousel[car].timer ) === '[object String]') {
     ...