A JavaScript object that creates a simple carousel out of any element with the class "carousel". Has a section for adding animations in between slides.

carousel-animations.js

/**
@description
	Creates a slide-show (i.e. carousel) out of anything with the class "carousel". 
@guide		https://youtu.be/BwwqVFehlqQ 
@author		Jeremy England
@company	SimplyCoded
@revised	04-16-2016
*/
// CAROUSEL OBJECT
function Carousel(containerID) {
	this.container = document.getElementById(containerID) || document.body;
	this.slides = this.container.querySelectorAll('.carousel');
	this.total = this.slides.length - 1;
	this.current = 0;
	
	// start on slide 1
	this.slide(this.current);

	// ANIMATION EFFECTS
	this._animate = function (direction, effect, interval) {
		
		/**effect: name1*/
		if (effect == "name1") {
			
		}
		
		/**effect: none*/
		else {
			eval(direction);
			this.slide(this.current);
		}
	};
}
// NEXT
Carousel.prototype.next = function (effect, interval) {
	effect = effect 	|| false;
	interval = interval || false;
	
	var next = "var elemOut = this.slides[this.current];" +
	"(this.current === this.total) ? this.current = 0 : this.current += 1;" +
	"var elemIn = this.slides[this.current];";
	
	this.stop();	
	this._animate(next, effect, interval);
	
	if(typeof interval === 'number' && (interval % 1) === 0) {
		var context = this;
		this.run = setTimeout(function() {
			context.next(effect, interval);
		}, interval);
	}
};
// PREVIOUS
Carousel.prototype.prev = function (effect, interval) {	
	effect = effect 	|| false;
	interval = interval || false;
	
	var prev = "var elemOut = this.slides[this.current];" +
	"(this.current === 0) ? this.current = this.total : this.current -= 1;" +
	"var elemIn = this.slides[this.current];" ;
	
	this.stop();	
	this._animate(prev, effect, interval);
	
	if(typeof interval === 'number' && (interval % 1) === 0) {
		var context = this;
		this.run = setTimeout(function() {
			context.prev(effect, interval);
		}, interval);
	}
};
// STOP PLAYING
Carousel.prototype.stop = function () {
	clearTimeout(this.run);
};
// SELECT SLIDE
Carousel.prototype.slide = function (index) {	
	if (index >= 0 && index <= this.total) { 
		this.stop();
		for (var s = 0; s <= this.total; s++) {
			if (s === index) {
				this.slides[s].style.display = "inline-block"; 
			} else {
				this.slides[s].style.display = 'none';
			}
		}
	} else {
		alert("Index " + index + " doesn't exist. Available : 0 - " + this.total);
	}
};