Auto-playing Featured Content Slider

Creating a Slick Auto-Playing Featured Content Slider using the jQuery Library. Originaly by Chris Coyier

Functionality Checklist

Like I said, the Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn’t a huge pain. There are links which act as navigation to quickly jump to any particular panel. These links can be anything (text hyperlink, thumbnail, etc) and link to a unique hash value URL (each panel has a unique URL if need be). Coda Slider provides all of this out of the box.

Here is what we need in addition:

Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.

Let’s go through the HTML, CSS, and JavaScript.

The HTML

Here is the framework HTML for just the slider itself:

<code style="height: 350px;">&lt;div class="slider-wrap"&gt;
	&lt;div id="main-photo-slider" class="csw"&gt;
		&lt;div class="panelContainer"&gt;
 
			&lt;div class="panel" title="Panel 1"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- REGULAR IMAGE PANEL --&gt;
					&lt;img src="images/tempphoto-1.jpg" alt="temp" /&gt;
					&lt;div class="photo-meta-data"&gt;
						Photo Credit: &lt;a href="http://flickr.com/photos/astrolondon/2396265240/"&gt;Kaustav Bhattacharya&lt;/a&gt;&lt;br /&gt;
						&lt;span&gt;"Free Tibet" Protest at the Olympic Torch Rally&lt;/span&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel" title="Panel 2"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- PANEL CONTENT --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel" title="Panel 3"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- EXAMPLE OF OTHER PANEL POSSIBILITIES --&gt;
					&lt;img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/&gt;
 
					&lt;h1&gt;How to Cook a Scotch Egg&lt;/h1&gt;
 
					&lt;ul&gt;
						&lt;li&gt;6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)&lt;/li&gt;
						&lt;li&gt;1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)&lt;/li&gt;
						&lt;li&gt;1/2 cup AP flour&lt;/li&gt;
						&lt;li&gt;1-2 eggs, beaten&lt;/li&gt;
						&lt;li&gt;3/4 cup panko-style bread crumbs&lt;/li&gt;
						&lt;li&gt;Vegetable oil for frying&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel" title="Panel 4"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- PANEL CONTENT --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel" title="Panel 5"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- PANEL CONTENT --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel" title="Panel 6"&gt;
				&lt;div class="wrapper"&gt;
					&lt;!-- PANEL CONTENT --&gt;
				&lt;/div&gt;
			&lt;/div&gt;
 
		&lt;/div&gt;
	&lt;/div&gt;
 
	&lt;!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED --&gt;
 
	&lt;a href="#1" class="cross-link active-thumb"&gt;&lt;img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;
	&lt;div id="movers-row"&gt;
		&lt;div&gt;&lt;a href="#2" class="cross-link"&gt;&lt;img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;&lt;a href="#3" class="cross-link"&gt;&lt;img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;&lt;a href="#4" class="cross-link"&gt;&lt;img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;&lt;a href="#5" class="cross-link"&gt;&lt;img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;&lt;/div&gt;
		&lt;div&gt;&lt;a href="#6" class="cross-link"&gt;&lt;img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /&gt;&lt;/a&gt;&lt;/div&gt;
	&lt;/div&gt;
 
&lt;/div&gt;</code>

The CSS

The full CSS for this example has a basic reset, some utility styles and basic structure. Below, I’ll just show you the CSS relevant to the slider itself, but you can view the full CSS here.

<code>.slider-wrap						{ width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul						{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer						{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 						{ border: 1px solid black; margin-right: 5px; }
#movers-row						{ margin: -43px 0 0 62px; }
#movers-row div					{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data					{ background: url(images/transpBlack.png); padding: 10px; height: 30px;
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 					{ font-size: 13px; }
.cross-link						{ display: block; width: 62px; margin-top: -14px;
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 						{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }</code>

Anything in there that starts with “.strip” is core to the slider itself, getting those panels set up and the wrapper around them, all the CSS magic needed to make a slider do its thing. From “.nav-thumb” on down is stuff specific to this example. The thumbnails have thin black borders. The meta-data section is pushed off the panel by the image, but then is forced back up with a negative top margin and a transparent black background applied.

The “.active-thumb” class is very important too, if a thumbnail has this class, it gets the special background applied, which is the white arrow we wanted to indicate the current panel. This class will get applied and removed in the JavaScript.

The JavaScript

In the header section of your HTML, you’ll need to include jQuery and all the plugin files. The bare minimum basics look like this:

<code>&lt;script type="text/javascript" src="js/jquery-1.2.6.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-easing-1.3.pack.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"&gt;&lt;/script&gt;
 
&lt;script type="text/javascript"&gt;
	$(function(){
 
		$("#main-photo-slider").codaSlider();
 
	});
&lt;/script&gt;</code>

That will activate the slider, but remember we have some extra functionality to get cooking here. Instead of altering the plugin itself, we can add the extras by writing our own little function on top of it. In essence, to achieve the “auto-play” effect, we are going to trigger a click event on the next thumbnail in line every 3 seconds. We’ll call the function “theInterval”, and we’ll need a couple of variables, so we’ll set those up first.

<code>var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;
 
theInterval = function(cur){
	clearInterval(theInt);
 
	if( typeof cur != 'undefined' )
		curclicked = cur;
 
	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
 
	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 6 == curclicked )
			curclicked = 0;
 
	}, 3000);
};</code>

We aren’t done yet though. We need to call our function, for one thing. But we also need to handle a manual click event on one of our thumbnails properly. We want a manual click event to use the same function, so that the “current” thumbnail can be reset properly and we don’t see any weird jumping around. Right after our function, we can now add this final code, to be fired when the DOM is ready:

<code>$(function(){
 
	$("#main-photo-slider").codaSlider();
 
	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");
 
	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});
 
	theInterval();
});</code>

Couple more things to note. Notice the number “6″ is hardcoded in our function. If you change the number of thumbs, you’ll have to change it here as well. Also, you may have noticed the seemingly strange element that click event is being triggered on (”.stripNav ul li a”… where is that?!). You’ll notice that isn’t anywhere in our HTML. Actually, the Coda Slider plugin automatically generates this unordered list from the number of panels when it runs. Very handy sometimes we we have hidden it in the CSS in our example. We are using them in our function though, as they will be the most reliable elements for the click event. They will exist no matter what, and this example will continue to work and be auto-play regardless if we use the thumbnail navigation or not…view full article.

March 14th, 2009| Ajax, jQuery|

o2 mobiles said

October 7 2009 @ 7:00 pm

o my god

i need 2 eyes to read and understand the codings

Bollywood said

October 8 2009 @ 9:36 pm

The Html script you provided is a great help for me. I was looking for this for a long time now.

Thanks a lot.

Guaranteed Signups said

October 10 2009 @ 9:19 am

Do you do custom blog designs? hit me up on my email.

Business list said

October 20 2009 @ 2:48 pm

i think if html use with ajex it is more powerfull.

Jamillah said

October 22 2009 @ 7:47 pm

Thanks for the info. This was of help for me.

Fleakitten said

October 22 2009 @ 7:48 pm

very helpful.

Email You said

November 16 2009 @ 10:24 pm

Useful script, Thanks mate, will use it for sure.

Worldstuffer said

November 16 2009 @ 10:25 pm

Thanks, helped me to enhance my blog sites, now it look more alive.

Creare Site said

November 17 2009 @ 12:06 am

Thans for info, I use jQuery and will be very useful for me

newblogger said

January 8 2010 @ 7:22 pm

Please, can yo do a step by step guide. I have no clue where to start. Thanks

Giselle said

January 15 2010 @ 6:21 pm

Can someone add a featured slider for me?

design web london said

September 1 2010 @ 10:17 pm

hey man thanks for the piece of code i am gonna use it soon ,,,, and lets see if it will work for me with dynamic contents …. i will inform you soon ,,,