I'm Gilbert Pellegrom.

Today I’m going to show you how to create the Ultimate jQuery Slider which is really more like a website template than just a slider. I first wrote this code for my portfolio website dev7studios so you can see an example of it being used in real life there. Although the jQuery itseld is a wee bit complex overall it’s not as hard an effect to achieve as you might think.

The HTML

Ok so let’s start off with the easy part, the HTML. I’m not going to show the whole HTML here but just the structure. To see the whole HTML you can download the source later.

<div id="wrapper">
    <div id="top">
        <div id="feature">
 
            <h1>Ultimate jQuery Slider</h1>
            <div id="cycle">
                <img src="image1.png" alt="Title 1" id="slide1" />
                <img src="image2.png" alt="Title 2" id="slide2" />
                <img src="image3.png" alt="Title 3" id="slide3" />
            </div>
            <a id="next-arrow"><span>Next</span></a>
            <div id="nav"></div>
 
        </div>
    </div>
    <div id="body">
        <div id="content">
 
            <div id="product_slide1">
                <!-- Content here... -->
            </div>
 
            <div id="product_slide2">
                <!-- Content here... -->
            </div>
 
            <div id="product_slide3">
                <!-- Content here... -->
            </div>
 
        </div>
    </div>
    <div id="footer"></div>
</div>

As you can see here the structure of the HTML is fairly simple. The most important part’s to note is the cycle div with the images inside. We are going to be using the jQuery Cycle plugin for our scroller but I’ll explain more about that later on. Note that these images require an id attribute. This id will be how we reference the page hash and also how we know which content div to show (prefixed with product_).

There is also a next-arrow link and an empty nav div. These are required for the navigation to work and their functionality will be added when we set up the Cycle plugin.

The CSS

Ok now for some CSS. Again I am not including all of the CSS here (it is included in the source code download) rather I’m just showing the relevant parts of the CSS.

#top {
	background:url(images/background.png) repeat;
	width:100%;
	height:600px;
}
#feature {
	width:900px;
	height:100%;
	margin:0 auto;
	background:url(images/feature_back.png) no-repeat 50% 0;
	position:relative;
}
#feature h1 {
	width:350px;
	height:40px;
	margin:0 auto;
	background:url(images/header.png) no-repeat 0 bottom;
	padding-top:30px;
	text-indent:-9999px;
}
#feature a#next-arrow {
	background:url(images/next.png) no-repeat 200% center;
	position:absolute;
	width:180px;
	height:480px;
	top:80px;
	right:0px;
	text-indent:-9999px;
	cursor:pointer;
	/* Initially hidden */
	opacity:0;
}
#feature a#next-arrow span {
	display:block;
	width:100%;
	height:100%;
	background:url(images/next.png) no-repeat -220% center;
	z-index:99;
	/* Initially hidden */
	opacity:0;
}
 
#cycle {
	margin:0 auto;
	margin-top:40px;
	/* Initially hidden */
	opacity:0;
}
#cycle img {
	width:586px;
	height:450px;
	background:url(images/loading.gif) no-repeat 50% 50%;
}
 
#nav {
	width:50px;
	margin:0 auto;
	/* Initially hidden */
	opacity:0;
}
#nav a {
	background:url(images/bullet.png) no-repeat;
	display:inline-block;
	width:15px;
	height:15px;
	text-indent:-9999px;
}
#nav a.activeSlide {
	background:url(images/bullet_active.png) no-repeat;
}
#nav a:focus { 
	outline: none; 
}
 
 
#body {
	background:#fff url(images/body.png) repeat-x;
	width:100%;
	min-height:60px;
	margin-top:-10px;
}
 
#content {
	width:600px;
	margin:0 auto;
	padding-top:30px;
	/* Initially hidden */
	opacity:0;
}
 
#content div {
	/* Initially hidden */
	display:none;
}

Ok there is quite a lot in there but take your time to go through it. Part’s to notice are:

• #feature has position set to relative to that we can absolutely position the #next-arrow.
• The #next-arrow span definition is for the fancy fade effect we will implement in the javascript. It’s outside of the scope of this article to explain how this works but it’s safe to say it’s not required and you could just use :hover here.
• The #nav width is set manually. This is not very elegant and needs to be changed depending on how many links (bullets) you have if you want it to remain centred.
• A lot of the elements we have are initially hidden. This is so we can have our fancy fade-in effects when the page loads.
• We are using opacity here. Most modern browsers support pure CSS opacity but some (cough… IE cough…) don’t. Although this has been tested in modern browsers I’ve not made much effort to make it backwards compatible due to the fact we are using several techniques that won’t work in older browsers.

And that is us for the CSS. The rest is either fairly self explanatory or outside the scope of this article. However if you do have any questions about the CSS then please leave a comment and I will try and answer it.

The Javascript

Now for the fun part. The javascript.

$(document).ready(function(){
 
	//find starting index based on hash
	var start = 0;
	if(window.location.hash != ''){
		if($('#product_' + window.location.hash.replace(/#/, '')).size() > 0){
			var id = window.location.hash;
			var afterCount = $(id + ' ~ img').size();
			start = ($('#cycle img').size() - afterCount) - 1;
		}
	}
 
	//set up jQuery Cycle
	$('#cycle').cycle({
		fx:'fade', 
		speed:1000,
	      timeout:0,
		pager:'#nav', //populate the bullet navigation
		next:'#next-arrow', //next arrow link
		before:onBefore, //our onBefore callback
		startingSlide:start //set the starting slide
	});
 
	function onBefore(){
		//don't do if initial load
		if($('#content div:visible').size() > 0){
			var img = this;
			window.location.hash = '#'+img.id;
			//Dynamically set window title. Not SEO friendly.
			document.title = img.alt + ' | Ultimate jQuery Slider';
			$('#content').animate({opacity:0}, 500);
			$('#content div:visible').slideUp(500, function(){
				$('#content #product_' + img.id).slideDown(500);
				$('#content').animate({opacity:1}, 500);
			});
		}
	}
 
	//initial load
	var img = $('#cycle img:eq('+ start +')');
	window.location.hash = '#'+img.attr('id'); //set inital hash
	//Dynamically set window title. Not SEO friendly.
	document.title = img.attr('alt') + ' | Ultimate jQuery Slider';
 
	$('#cycle').animate({opacity:1}, 800, '', function(){
		$('#nav').animate({opacity:1}, 500);
	});
 
	$('#content div:eq('+ start +')').slideDown(500, function(){
		$('#content').animate({opacity:1}, 500, '', function(){
			$('#footer').animate({opacity:1}, 500);
		});
	});
 
	//next arrow fade
	$('#feature').hover(function(){
		if(jQuery.support.opacity){
			$('#next-arrow', this).stop().animate({opacity:1}, 500);
		}
	}, function(){
		if(jQuery.support.opacity){
			$('#next-arrow', this).stop().animate({opacity:0}, 500);
		}
	});
 
	//next arrow hover
	$('#next-arrow').hover(function(){
		if(jQuery.support.opacity){
			$('span', this).stop().animate({opacity:1}, 500);
		}
	}, function(){
		if(jQuery.support.opacity){
			$('span', this).stop().animate({opacity:0}, 500);
		}
	});
 
	//IE compatibility
	if(!jQuery.support.opacity){
		$('#next-arrow span').css('opacity', 0);
	}
});

So what is happening here? Well let’s go through it step by step:

• First of all, if you haven’t already, download the jQuery Cycle plugin and include it in your HTML. I’m not going to explain here how this plugin works but the jQuery Cycle website has plenty of good documentation.
• The first thing we are doing here is finding what the index of the starting slide should be. On our site we are using hashes as permalinks for the pages. Although this is very SEO un-friendly it does mean that people can link to specific pages (or slides) on the site.
  As for the code we are saying “if there is a hash and a corresponding content div (prefixed with product_), count the number of siblings after this one and subtract this from the total number of children to get the starting index”.
• Next we are setting up the Cycle plugin. There are just default values for fading and time and setting timeout to zero to stop the slides automatically progressing. We also link up the #next-arrow and #nav elements that we made earlier. We also set our before callback so we can do things before the slides change.
• Next we have the definition of our onBefore callback function. This function changes the window hash and title and handles the fading and sliding animation of the slide transitions.
• Then we have some code which happens only when the page first loads. This is basically the same as the onBefore function but with some small differences to the animation (e.g. everything fades in at different times rather than sliding up and down).
• The next bit of code makes the #next-arrow fade in only when you are hovering over the #feature div. Fairly simple. Note the use of opacity.
• The next bit of code is what I talked about earlier that defines the fancy hover-fade effect for the #next-arrow. This is out of the scope of this article but again it is safe to say this is not required if you just used #next-arrow:hover in the CSS.
• Finally we just have a small bit of compatibility code to make sure the #next-arrow span is hidden. As I discovered jQuery opacity seems to different from CSS opacity so this works even though it is only called on browsers that don’t support CSS opacity.

And that is the javascript. I would read through this a couple of times as it is not a simple piece of javascript but hopefully it will all make sense eventually.

Conclusion

So there you have it. The Ultimate jQuery Slider. Please feel free to tell me what you think of this code and let me know if you find any bugs. I’d especially love to know if you use this code anywhere so don’t be shy and let me know.

View Demo Download Source