dev4web
3/1/2015 - 4:46 AM

Simple JavaScript Carousel

Simple JavaScript Carousel

carousel-example.js
content_copyfile_download
// Get all the carousels on the page
var allCarousels = document.getElementsByClassName('carousel-container');

// Iterate over all of the carousels using a FOR-loop
for(var i=0;i<allCarousels.length;i++) {
	// Create a JSON object to keep track of each carousel
	var carousel = { container: allCarousels[i] };

	// Get the <figure> element inside of this particular carousel
	carousel.figure = carousel.container.querySelector('figure');
	// Grab the UL element inside of that
	carousel.figureCont = carousel.figure.querySelector('ul');
	// Get all the list items inside of the UL
	carousel.items = carousel.figureCont.children;

	// Get the buttons, which will be used for manually changing the carousel
	carousel.buttons = {
		"prev": carousel.container.querySelector('button.carousel-previous'),
		"next": carousel.container.querySelector('button.carousel-advance')
	};

	// Set the default item to the first item; we'll start there
	carousel.currentItem = 0;

	// This is a CLOSURE function
	// We do this so that our carousel var stays the same
	(function(carousel){
		// Add an event listener to the previous button
		carousel.buttons.prev.addEventListener('click', function(e){ carouselPrev(carousel); });
		// Add an event listener to the next button
		carousel.buttons.next.addEventListener('click', function(e){ carouselNext(carousel); });

		// Start the automatic timer to cycle the carousel automatically
		startCarouselTimeout(carousel);
	})(carousel);
}

/**
 * carouselNext
 * @param carousel Object The carousel object to use for cycling next
 */
function carouselNext(carousel) {
	// Increase the index of the current item
	carousel.currentItem++;
	// If we increased it too much
	if(carousel.currentItem >= carousel.items.length) {
		// set it back to the first item
		carousel.currentItem = 0;
	}

	// Now that we've updated the index,
	// we'll display the items
	displayCarouselItem(carousel);
}

/**
 * carouselPrev
 * @param carousel Object The carousel object to use for cycling prev
 */
function carouselPrev(carousel) {
	// Decrease the index of the current item
	carousel.currentItem--;
	// If we're below zero, we've gone too far
	if(carousel.currentItem <= -1) {
		// Set it to the last item
		carousel.currentItem = carousel.items.length - 1;
	}

	// Now that we've updated the index,
	// we'll display the items
	displayCarouselItem(carousel);
}

/**
 * displayCarouselItem
 * @param carousel Object The carousel object to use for updating the carousel
 */
function displayCarouselItem(carousel) {
	// Reset the automatic timer
	startCarouselTimeout(carousel);
	// Set our new margin-left CSS property
	carousel.figureCont.style.marginLeft = -1 * (carousel.currentItem * 256);
}

/**
 * startCarouselTimeout
 * @param carousel Object The carousel object to use for automatically cycling
 */
function startCarouselTimeout(carousel) {
	// Cancel the last automatic timer
	clearTimeout(carousel.interval);
	// Create a new automatic timer
	// that will run carouselNext()
	// every 3 seconds
	carousel.interval = setTimeout(function(){
		carouselNext(carousel);
	},3000);
}
carousel-example.html
content_copyfile_download
<!DOCTYPE>
<html>
	<head>
		<title>Carousel Example</title>
		<link rel="stylesheet" href="carousel-example.css">
	</head>
	<body>
		<div class="carousel-container">
			<button class="carousel-previous">prev</button>
			<figure class="carousel">
				<ul>
					<li><img src="./image.png">
					<li><img src="./image2.png">
					<li><img src="./image3.png">
					<li><img src="./image4.png">
					<li><img src="./image5.png">
				</ul>
			</figure>
			<button class="carousel-advance">Next</button>
		</div>

		<script src="./carousel-example.js"></script>
	</body>
</html>
carousel-example.css
content_copyfile_download
div.carousel-container {

}
div.carousel-container > * {
	display: inline-block;
	vertical-align: middle;
}
div.carousel-container > button {
	color: transparent;
	border: 0px;
	background: transparent url(./carousel-left.png);
	height: 28px;
	width: 17px;
}
div.carousel-container > button:last-of-type {
	background-image: url(./carousel-right.png);
}

	figure.carousel {
		height: 256px;
		width: 256px;
		overflow: hidden;
	}
		figure.carousel ul {
			list-style-type: none;
			margin: 0px; padding: 0px;
			width: 1000%;
		}

		figure.carousel ul li {
			display: inline-block;
		}