A Super Simple jQuery Fading Slideshow

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>




Related Posts


Simple Sticky Element

The user scrolls down the page and once the scrolling reaches the top of an element of my choosing, that element sticks to the top of the window, so it's always visible from that point on...
Read Post

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn't find a good way to remove the horizontal padding to the left and right of a google graph. From what I can find, there really isn't a good way to do it...
Read Post

PHP JSON Returned As Object Instead of Array

I was returning, what I thought was an array from PHP, but it kept returning it as a json object...
Read Post

A Simple Slideout Menu

I just wanted an easy slideout menu. Click on a link, and the menu slides out from the left side of the screen. Click on the link again, or somewhere else on the page, and the menu slides back in...
Read Post