jQuery - ResponsiveReel

gistfile1.js

	// Simple Slideshow
	$(function () {
		var visibleClass = 'visible'; // no .
		var currentClass = 'current'; // no .
		var animationTime = 300; // fade duration
		var containerClass = '.slides'; // class on container
		var slideItem = 'img'; // what are we sliding?
		var slideItems = $(containerClass).find(slideItem); // all slides
		var slideNumbers = $(".slide-nav a"); // pagination numbers
		var slideNext = $(".next"); // next link
		var slidePrev = $(".prev"); // prev link
		var totalSlides = parseInt((slideItems.length)); // how many slides?
		var animatingSlideId = 0; // we're not animating anything yet

		// Function to animate slides
		function animateSlides(targetSlideId) {
			// Get slide we're meant to be showing
			targetSlide = slideItems.filter("[data-slide=" + targetSlideId + "]");
			// If target slide isn't shown already and isn't animating
			if(!targetSlide.hasClass(visibleClass) && targetSlideId!=animatingSlideId) {
				// Set the slide we're animating
				animatingSlideId = targetSlideId;
				// Animate visible slide out
				slideItems.filter("." + visibleClass + "").animate({
					opacity: 0
				}, animationTime,
				function() {
					// We're done animating
					animatingSlideId = 0;
					// Remove visible class from all slides (to be sure)
					$(slideItems).removeClass(visibleClass);
				});
				// Animate target slide in
				$(targetSlide).animate({
					opacity: 1
				}, animationTime,
				function() {
					// We're done animating
					animatingSlideId = 0;
					// Set visible slide
					$(this).addClass(visibleClass);
				});
				
				// Remove current class from all slide numbers (to be sure)
				slideNumbers.removeClass(currentClass);
				// Add current class to target slide number item
				slideNumbers.filter("[data-slide=" + targetSlideId + "]").addClass('current');
			}
			
		}
		
		// When triggers are clicked
		$(slideNumbers).click(function() {
			// Get ID of target slide
			targetSlideId = $(this).attr("data-slide");
			// Animate slides
			animateSlides(targetSlideId);
			return false;
		});
		
		// When 'next' is clicked
		$(slideNext).click(function() {
			currentSlide = slideItems.filter("." + visibleClass + "").attr("data-slide");
			currentSlideId = parseInt(currentSlide);
			// If current slide is the last one
			if(currentSlideId == totalSlides) {
				// Reset target ID to first slide
				targetSlideId = 1;
			}
			// Otherwise
			else {
				// Target ID is the next slide
				targetSlideId = (currentSlideId + 1);
			}
			// Animate slides
			animateSlides(targetSlideId);
			return false;
		});
		
		// When 'prev' is clicked
		$(slidePrev).click(function() {
			currentSlide = slideItems.filter("." + visibleClass + "").attr("data-slide");
			currentSlideId = parseInt(currentSlide);
			// If current slide is the first one
			if(currentSlideId == 1) {
				// Reset target ID to last slide
				targetSlideId = totalSlides;
			}
			// Otherwise
			else {
				// Target ID is the previous slide
				targetSlideId = (currentSlideId - 1);
			}
			// Animate slides
			animateSlides(targetSlideId);
			return false;
		});
		
	});