Slider

slider.js

// Global variable declarations

var i = 1;
var nudge = -50;
var bigNudge = -100;
var imgs = document.getElementsByTagName('img');


$( document ).ready(function(){

	/**
	 * Why the following two variables can't be global... I don't know. Maybe a closure issue?
	 */

	// This creates an array out of all the img tags on the page.
	var array = jQuery.makeArray(imgs);
	// This defines an increment for the progress line.
	var inc = 100 / array.length;

	//This makes the progress line grow with each slide. 
	$('#progress').css('width', inc * i + inc  + '%');

	// This grabs all the data set for all images. It then uses that data to generate background photos for the .backslide class.
	for (var counter = 0; counter <= array.length; counter++) {
		var use = $('img:nth-of-type(' + counter + ')').data('path');
		$( ".backstrip" ).append( "<div class='backslide b" + counter + "' </div>");
		$('.backslide:nth-of-type(' + counter + ')').css({"backgroundImage": 'url(' + use + ')', "backgroundSize" : "cover", "backgroundPosition" : "50% 50%"});
	}
	
	// This is what happens when the previous button is clicked.
	$( '#prev' ).on('click', function(){
		var currentImg = $('.feature'); 
		var prevImg = currentImg.prev('img');

		if ( prevImg.length ){
			currentImg.removeClass("feature");
			i--;
			$('.strip').css('margin-left', nudge * i + 'vw');
			$('.backstrip').css('margin-left', bigNudge * i + 'vw');
			prevImg.addClass("feature");
			$('#progress').css('width', inc * i + inc  + '%');
		}
	})

	// This is what happens when the next button is clicked.
	$( '#next' ).on('click', function(){
		var currentImg = $('.feature'); 
		var nextImg = currentImg.next('img');

		if ( nextImg.length ){
			currentImg.removeClass("feature");
			i++;
			$('.strip').css('margin-left', nudge * i + 'vw');
			$('.backstrip').css('margin-left', bigNudge * i + 'vw');
			nextImg.addClass("feature");
			$('#progress').css('width', inc * i + inc  + '%');
		}
	})

});