Grow your CSS skills. Land your dream job.

Creating a Slick Auto-Playing Featured Content Slider

Published by Chris Coyier

I love the Coda Slider plugin for jQuery. I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much "out of the box". Sure the design was heavily altered to fit the job, but the actual functionality wasn't altered in any way. I recently had the calling to build a "featured content area". The Coda Slider fit the bill almost perfectly, but it needed a little functionality surgery to do what I wanted it to do. Special thanks to Benjamin Sterling for helping me out and figuring out some quirks for me.

View Demo   Download Files

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. DONE.
  • 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. ADDED, SEE BELOW.
  • 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. ADDED.

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

The HTML

Here is the framework HTML for just the slider itself:

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">

			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>		
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
					<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
			
					<h1>How to Cook a Scotch Egg</h1>
			
					<ul>
						<li>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)</li>
						<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
						<li>1/2 cup AP flour</li>
						<li>1-2 eggs, beaten</li>
						<li>3/4 cup panko-style bread crumbs</li>
						<li>Vegetable oil for frying</li>
					</ul>
				</div>
			</div>
			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 6">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>

		</div>
	</div>

	<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->

	<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
	<div id="movers-row">
		<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
	</div>

</div>

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.

.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; }

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:

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

	});
</script>

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.

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);
};

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:

$(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();
});

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 Demo   Download Files

UPDATE: Auto-Play

Thanks to Jack Reichert:

var $j = jQuery.noConflict();

var theInt = null;
var curclicked = 0;
var stop = 0;

theInterval = function(cur){
       clearInterval(theInt);

       theInt = setInterval(function(){
               $j(".coda-nav-right a").eq(curclicked).trigger('click');
               curclicked++;
               if( 10 == curclicked )
                       curclicked = 0;
               $j("#stop").click(
                       function(){
                               if (stop==0){
                               clearInterval(theInt);
                               stop=1;}
                       });
       }, 750);
       $j("#stop").click(
               function(){
                       stop=0;
                       theInterval();
               }
       );
};
$j(function(){
       $j("#main-photo-slider").prepend('<div id="stop">Start/Stop</div>');
       $j("#main-photo-slider").codaSlider();
       theInterval();
});

Comments

  1. That’s awesome, and was exactly the thing I was looking for right now. Thanks!

  2. sweet. i have made something like this a year ago.

    http://jeeran.com/tour.aspx?lang=e

    this is very challenging when its Arabic.

  3. Permalink to comment#

    Very cool. I was recently looking for something like this for a photog section of my site. Thanks Chris.

    OK, but more importantly… my breakfast totally sucked this morning and then I sit down to browse thru my feeds and see this egg! So, where can I get the full recipe. ;)

  4. Permalink to comment#

    YES!!
    I have been looking for something like this for so long after I saw asimilar widget on the header on lifehacker.com. But this one has auto-scroll. This is awesomeness right there.

    Thanks!

  5. Permalink to comment#

    I forgot to mention asylum.com has something similar. But I don’t think they use coda

  6. Anthony
    Permalink to comment#

    This is pretty awesome. Made one of these in flash and hated it. This seems to do the trick in a rather painless way.

    Thanks!

  7. Peter
    Permalink to comment#

    Could you implement some way to (temporarily) pause the slider. e.g. on hover or click ‘n’ hold ? I’m having trouble reading the text-intensive items -> very considerate of you to feature the Scotch Egg recipe above this post ;-)

  8. Oh My… That’s great. I was thinking where Could I find it? Now… I’m going implement this in one of my projects.
    Thanks a lot.

  9. Permalink to comment#

    Yes this is the best, I like to add some stuff like autoplay stop after cycling for some time and add trigger for mouseover…how to do that?

  10. Very nice. I’ve used the Cycle plugin for Jquery to similar effect. It has a pause onHover feature so you can read the text.
    Some suggestions:
    1. Pause/Stop and Play buttons
    2. Configurable timer variable – ie. 4 seconds/slide or whatever.
    3. Variable slide timer – ie. if one slide needs to be on for more time (say the first slide; or a text-heavy slide) before switching, that could be set as a variable
    4. Effects variable. I’m not fond of the way this example jumps from the last image back to the first one. I prefer a look that’s more along the lines of a carousel of images/slides instead.

  11. This is great i can imagine this being used for many a project,

    Thanks for the post and download
    Max | Design Shard

  12. J.
    Permalink to comment#

    I second what Brian Lang said.

  13. [js/jquery-easing-compatibility.1.2.pack.js]
    Adds compatibility for applications that use the pre 1.2 easing names

    I was wondering why that extra js file was there for.

  14. Permalink to comment#

    Can you use more than 6 images? Would be nice if the thumbnail bar had separate, independent scrolling controls. For example, if it shifted the entire thumbnail row over once the 7th picture comes through the auto-play sequence.

    This works great though. I especially love the easing! Great post!

  15. Permalink to comment#

    I’m going to have to say this again and again: “Thank you.” I am a total hack, who’s still working to maintain a website as not just a hobby, but also as a challenge to update and to continue to learn new things. Stumbling across your site, as well as your Script & Style site has been an absolute blessing.

    Thank you for sharing. I love being able to learn new things and apply them, and you really do make it easy.

  16. Permalink to comment#

    Definitely going into my bookmark.
    This is something I would like to try out on one of my site!!

  17. Dumb question, but I can integrate this with WordPress correct? I guess the main thing to look out for is making sure I have the paths to the jQuery files correct and obviously a little massaging it, but that should be about it right?

  18. John S.
    Permalink to comment#

    Awesome implementation! Thanks for posting this. I just have one design comment… I think the “arrow” that indicates the content needs to be changed. When the content being displayed is white, the pointer disappears. Maybe add a small stroke? Or, have the pointer point down over the thumbnail (again, with a small stroke)?

  19. Corey F
    Permalink to comment#

    how do you stop this script once it get’s to the end?

  20. Malcom
    Permalink to comment#

    This is awesome, I was looking for something similar to this, after looking at other jquery slide shows this is the best i found, specially the way you did souce files even including the photoshop psd now that is impressive; on msn.co.uk they got the same thing but with the thumbnails on the right vertically instead of horizontal bottom.

    Thanks a lot really appreciated.

  21. Joseph
    Permalink to comment#

    I’ve implemented this and it works great.

    However styling it is a little harder. How come the first thumbnail is out there on its own? It ends up being higher or lower than the other five. Lots of weird negative margins going on which i’m not used to.

  22. bob
    Permalink to comment#

    how could this be implemented into a wordpress plug in or theme?

  23. gamermk
    Permalink to comment#

    I’m finding that jquery-1.2.6.min.js isn’t compatable with lightview :(

  24. Very nice example. But to much difficult code and not optimized for other developer to use.

  25. Permalink to comment#

    This is cool :) i’ll be adding it very soon to http://gtablog.es/ :)

    Thanks for the great tutorial!

  26. Jen
    Permalink to comment#

    I have this on our internal company’s website for front page news and interesting architecture.

    I’ve changed the code so that the auto playing slows down a little, but it only slows down the first tile to the second, after that, it goes back up to a faster speed.

    The only comments/complaints that I’ve had from employees is that when they’re trying to read something, it goes to the next page. It would be great if there were a pause/play button on the bottom or side.

    Or maybe that when they click on a thumbnail, the auto-playing feature is disabled.

    Thanks for the code! everything else works great!

  27. Thanks! I am a part of a web design company based in New York and this is a very helpful article!! Thanks again!

  28. Permalink to comment#

    Hi,

    I was wondering if I can use this script with image-buttons. I’ve seen some examples of this slider, that uses textlinks or css tabs, but what I would like to use are separate buttons for the active and in-active states. You can see a little example on my website where there are 3 buttons in black&white. When you hover over them, they become colored. What I would like is, when you click on a button, the colored one stays visible.

    Now I can achieve this using Flash, but I want to make my site non-flash for a change =)

    Thanks in advance.
    Jeff

  29. screaming code monkey
    Permalink to comment#

    Hi!
    Ive been a big fan of your work for yonks! and your teaching style rules! Been working on a web assignment lately using alot of jQuery to get a ‘flash’ effect without the flash,,, anyway my comment / question is:
    ‘is there a good way/practice to implement good degradation into jQuery code,, so that if javascript is turned off you wont get the content spewing out the bottom? or a css hack?’
    Again,, Love your work! Inspires me to do better design work!

  30. Hi,
    First of all, i want to thank you about your great article and content slider.
    One thing that i couldn’t figure out how to integrate it with my asp.net application. It is easy to create panels in a repeater but when it comes to pager it is a bit confusing to achive this.
    Because one the pager item is out of the “movers-row” div.
    Thank you

  31. Prashant
    Permalink to comment#

    Hi,
    This is nice. I use it for my website but slider moves correctly but the images in top panel not changes,so what happen that? I follow the instruction given here also put the code correctly so what’s going wrong?

  32. Permalink to comment#

    This is pretty awesome. Made one of these in flash and hated it. This seems to do the trick in a rather painless way.

  33. andrea
    Permalink to comment#

    isn't it possible to stop the slider?

    thanks

  34. Joe
    Permalink to comment#

    Nice tutorial as always, however I have some problem when I add a second row of images, don't know why. So I use your tutorial as an inspiration but doing in a bit different approach to get the same outcome. I used jquery cycle to do this, it's automatically create the thumbnails, which is more easier. Have a look at my work at http://www.thainesia.com.au/image. Any comments are welcome. Thanks

  35. Permalink to comment#

    This is REALLY awesome. I will build my own version of it and implement it in my current project.
    Thanks a lot for sharing!

  36. This is just what I was looking for and what a great clear explanation. Thanks so very much!

  37. Permalink to comment#

    hey i dono how to use this slide please help

  38. Permalink to comment#

    Hello,

    I need to increase the size of the div class=’wrapper’.

    Where is the wrapper class?

    Grato,

    Álvaro

  39. okayokayokay
    Permalink to comment#

    Like many other folks, I’d REALLY love to add a pause function, but I don’t know how to implement this myself. Has anyone out there managed to add a pause feature to this slider? This slider is so close to perfect – if it only had pause on hover!

  40. Cmars
    Permalink to comment#

    I got everything working and remembered to increase the number of images and my thumbs disappeared. I don’t have the slightest idea how to get them back. Need a bit of help.

  41. Tim
    Permalink to comment#

    How would I go about moving the thumbnails from under the rotating picture to the right of it, in two columns?

  42. very very thanks,Very nice example

  43. G
    Permalink to comment#

    Hi ,
    I love the slider. But I can’t get it to work at all. I have dropped in all folder contents and then copied and pasted your code with no luck. Is there additional code that I need ? Is there a more detailed , basic tutorials for non programers anywhere?

  44. Permalink to comment#

    Great job, it’s a lot easier to follow than from Coda in my opinion. I have a request for a future slider layout if it’s possible for you to do. Basically a left arrow, featured image, right arrow. It should also stop sliding when the mouse is hovered over the featured image.

    I’m just trying to get a way to do this same thing without taking up as much space…The arrows could literally use up 30 total pixels on the left and right of the featured image. Unfortunately every slider/carousel I’ve seen has too much stuff, and it’s been difficult for me to clean it up.

  45. Is it possible to have them slide vertically instead horizontally?

  46. Permalink to comment#

    Wicked plugin. Been look for this for a long time.

  47. Amy
    Permalink to comment#

    Great plugin, thank you for all the work you’ve put into it, it looks sleek and runs well.

    The external linking / cross linking capability no longer seems to function in your version the way it does in Coda Slider. Thought it was an error in my code, but when I checked it on your demo it has the same issue. Clicking the first thumb image itself generates no “#1″; clicking just above it does but does not result in a functional link. Any thoughts on why?

  48. reactlab
    Permalink to comment#

    The designers on the team say this plugin rocks! Can’t wait to use it on an upcoming project for a major Aussie publisher.

  49. joab
    Permalink to comment#

    Cool… This is exactly what I am looking for. You the Man!!!

  50. Samuel udochukwu
    Permalink to comment#

    This is soooooooo cool

  51. Tom N
    Permalink to comment#

    Thanks for the article. I have one problem, though. When I put something beneath the Slider section, it uses the Slider’s margins instead of reverting back to the left side of the screen.

    I have put the code outside all the endpoints. What do I need to do to reset the margins?

    Thanks in advance for your help!

  52. Silvina
    Permalink to comment#

    Very thanks
    one question, it is possible that I can change slide transitions? with fade effect
    que tengo que cambiar en el archivo js?
    many thanks if you can help me

  53. Silvina
    Permalink to comment#

    mi question is:
    I have to change in the js file?

  54. Brian
    Permalink to comment#

    Is it possible to embed YouTube video iframes in the panel?
    I have tried with no success.

  55. Silvina
    Permalink to comment#

    Hi Chris
    i would need to change the type of transition, it is possible to apply the fade transition?
    where the change?

  56. Shahbaz Ahmed Bhatti
    Permalink to comment#

    How i can add next previous arrow on thumbnail please help me

  57. Lindsay

    How can I add text below the images that have a hover state that changes when clicked? If the user clicks the image or the text, the slider works? Is that possible? Thanks.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".