Blog Web Dev A Super Simple jQuery Fading Slideshow

A Super Simple jQuery Fading Slideshow

By Forrest Smith - Drempd.com

I usually end up doing a search about every month for a nice slideshow script that fades between the various slides, provides some functionality for the user to jump to a specific slide, and that\’s about it. It doesn\’t have to do crazy transitions or bring out the razzle and dazzle, it just needs to change the slide nicely. Keep the code to a minimum and straightforward. Nice and simple.

I spent a little too much time looking for this elusive script, so I just ended up making one myself, so next month when I need this functionality again, I\’ll just have it here, ready to go.

Setting it up

Just include the script code (preferably just copy it to a file and link to it).  From the jquery document ready, just call it as shown below. Make sure you apply the \’fadeslides\’ to a wrapper div and apply the \’slide\’ class for each of the slide divs:

$(document).ready(function(){
     fadeslide();	
});

Changing slide duration

When calling the script, just include the duration as an object (note, the duration is in milliseconds):

$(document).ready(function(){
     fadeslide({duration: 10000});	//10 seconds between slide changes
});

Jumping between slides

Also note that the navigation between slides (everything within the \’fadeslides-nav\’ class) is optional, and isn\’t necessary for the script to work. Also, id\’s for each of the slides aren\’t necessary, unless you are using the jump navigation. To tie ach jump nav link to a specific slide, just include the slide\’s id as the href value in the link.

A Sample

It\’s not too much to look at, but I uploaded a fading slideshow sample here.  Of course it can be styled however needed.

The Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	
    <style>
		.slide{	
			width: 500px;
			height: 200px;
			border: 1px solid green;
		}
		.fadeslides-nav .active{
			color: red;
		}
	</style>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		
		<script>
		
		/*
		Sample HTML Code:
		
		<div class="fadeslides">
			<div id="slide-1" class="slide active">Slide 1</div>
			<div id="slide-2" class="slide">Slide 2</div>
			<div id="slide-3" class="slide">Slide 3</div>
		</div>
		
		<a href="slide-1" class="slidejump">Jump to Slide 1</a>
		<a href="slide-2" class="slidejump">Jump to Slide 2</a>
		<a href="slide-3" class="slidejump">Jump to Slide 3</a>
		
		
		***Firing it up:
			$(document).ready(function(){
				fadeslide();
			});
			
		***Firing it up with a specified slide duration:
			$(document).ready(function(){
				fadeslide({duration: 10000});	//10 seconds between slide changes
			});
		
		***Notes: 
		*id\'s on the individual slides are only needed if using the \'slide jump\' links.
		*href values on the slide jump links reference which slide that link controls.
		
		*/
		
		
		var fadeslide = (function(settings){
			
			//Show only first slide:
				$(\'.slide\').hide();
				$(\'.active\').show();
			
			//Set some defaults:
				if (!settings){
					var settings = {};
				}
				if (!settings.duration){
					settings.duration = 5000;
				}
			
			//Jump links:
				$(document).ready(function() {
					$(\'.slidejump\').click(JumpSlide);
				});
			
			//Go:
				var sliderefresh = setInterval (AutoSlide,settings.duration);
			
			function AutoSlide(){
				//Get the next slide:
					var currslide 	= $(\'.fadeslides .active\');
					var nextslide 	= currslide.next();
				
				//Get the next slide.  If it\'s the last slide, reset back to the first:
					if (currslide.is(\'.fadeslides .slide:last\')){
						nextslide 	= $(\'.fadeslides .slide:first\');
					}
				
				//Swap:
					SwapSlide(currslide,nextslide,"slow");
			}
			
			function SwapSlide(currslide,nextslide,speed){
						
				//Swap slides:	
					currslide.fadeOut(speed, function(){
						currslide.removeClass(\'active\');
						nextslide.fadeIn(speed).addClass(\'active\');
					});
					
				//Update the active class on the jumpnav
					var currslideid	= nextslide.attr(\'id\');
					$(\'.slidejump\').removeClass(\'active\');
					$(\'a[href*="\'+currslideid+\'"]\').addClass(\'active\');
					
			}
			
			function JumpSlide(e){
				e.preventDefault();
					
				//Stop the autoslides:	
					clearInterval(sliderefresh);
				
				//Get current and next slides:
					var currslide 	= $(\'.fadeslides .active\');
					var nextslide	= $(\'#\'+$(this).attr(\'href\'));
				
				//Swap:
					SwapSlide(currslide,nextslide,"fast");
			}
				
		});
		
		$(document).ready(function(){
			fadeslide();
		});
	</script>
	
</head>
<body>
	<div class="fadeslides">
		<div id="slide-1" class="slide active">Slide 1</div>
		<div id="slide-2" class="slide">Slide 2</div>
		<div id="slide-3" class="slide">Slide 3</div>
	</div>
	
	<div class="fadeslides-nav">
		<a href="slide-1" class="slidejump active">Jump to Slide 1</a>
		<a href="slide-2" class="slidejump">Jump to Slide 2</a>
		<a href="slide-3" class="slidejump">Jump to Slide 3</a>
	</div>
</body>
</html>