Simple slideshow example using jquery (depends on imagesLoaded library).

slideshow.css

/*#slideshow { display: none; }
@media (min-width: 48em) { */
	#slideshow {
		display: block;
		background-position: center top;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		 -khtml-background-size: cover;
		   -moz-background-size: cover;
		    -ms-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
/*}*/
@media (min-width: 72em) {
	#slideshow {
		right: 10%;
		left: 10%
	}
}



#hero {
	border-width: 0 0 2px;
	border-style: solid;
	border-color: #224f70;
	background-color: #224f70;
	padding: 10px;
	position: relative;
	min-height:200px;
}
#hero aside {
	xbackground: rgba(243, 247, 250, .9);
	xpadding: 20px;
	xborder-radius: 6px;
	display:none;
}
#hero aside > :first-child { margin-top: 0; }
#hero aside > :last-child { margin-bottom: 0; }
#hero p span { display: none; }
@media (min-width: 48em) {
	#hero {
		background-image: url(../images/logo-watermark.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 80%;
		padding: 0;
	}
	#hero .wrap {
		position: relative;
		height: 30vh;
	}
	#hero aside {
		display:block;
		background: rgba(243, 247, 250, .9);
		padding: 20px;
		border-radius: 6px;
		position: absolute;
		left: 50%;
		bottom: 20px;
		right: 20px;
		z-index: 2;
	}
	#hero p span { display: inline; }
}
@media (min-width: 72em) {
	#hero .wrap { height: 50vh; }
}

slideshow.html

	<section id="hero" class="container">
		
		<div class="wrap">
			
			<aside>
				
				<h1>Welcome to XXXXXXXXXXXXXXXXX</h1>
				
				<p>Description goes here.</p>
				
				<p><a href="plans.html" class="button button-success">View Access Options</a></p>
				
			</aside>
			
		</div>
		
		<div id="slideshow"></div>
		
	</section>

slideshow.js

(function() {
	
	'use strict';
	
	var i = 0;
	var $timeout = 0;
	var $parallax = $('#slideshow');
	var $images = [{
		url: 'slideshow/FamilyReunion.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/JasonWendyEyecontact.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/JasonWendyHandsOnly.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/JohnnyKaterinaFaceMassage2.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/JuanClaudiaByline.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/KellyNateByline.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/MelissaJosephSmilingEdited.jpg',
		caption: '',
		credit: '',
		org: ''
	}, {
		url: 'slideshow/ThomasHellenShoulderMassageEnh.jpg',
		caption: '',
		credit: '',
		org: ''
	}];
	
	// http://stackoverflow.com/a/5533262/922323
	var len = function(obj) {
		
		var l = 0;
		
		$.each(obj, function(i, elem) {
			
			l++;
			
		});
		
		return l;
		
	};
	
	function shuffleArray(array) {
		var i;
		var j;
		var temp;
		for (i = array.length - 1; i > 0; i--) {
			j = Math.floor(Math.random() * (i + 1));
			temp = array[i];
			array[i] = array[j];
			array[j] = temp;
		}
		return array;
	}
	
	$images = shuffleArray($images);
	
	window.clearTimeout($timeout);
	
	// Basic slideshow:
	(function timer() {
		
		// Load the image first:
		$('<img src="' + $images[i].url + '">')
			.imagesLoaded(function() {
				
				//console.table($images)
				
				// Hide the current image:
				$parallax.fadeOut(1000, function() {
					
					// Caption?
					var template = ($images[i].caption) ? [
						'<span>',
							'<span>',
								$images[i].caption,
							'</span>',
							(($images[i].credit) && ('<br><span>' + $images[i].credit) + (($images[i].credit) && ('<br><span>/</span>' + $images[i].org)) + '</span>'),
						'</span>'
					].join('\n') : '';
					
					// Link?
					if ($images[i].link) {
						
						// Yup, then hot it up:
						$parallax.attr('href', $images[i].link);
						
					} else {
						
						// Nope, so might as well remove it:
						$parallax.removeAttr('href');
						
					}
					
					// Update caption and show new image:
					$parallax
						.html(template)
						.css('background-image', 'url(' + $images[i].url +')')
						.fadeIn(1000);
					
					i++;
					
					// Start from beginning?
					if (i == len($images)) {
						
						i = 0; // Yes.
						
					}
					
					// Rinse, wash and repeat:
					$timeout = window.setTimeout(timer, 20000);
					
				});
				
			});
		
	}());
	
})();