Tutorials

Create a Custom Content Slider with jQuery

Written by Kevin Liew on 08 Jun 2010
157,780 Views • Shares
59 comments

Introduction

I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quotes, jokes and whinging.

Alright, let's get into the tutorial

This time, we are going to make a custom content slider. I implemented this in my recent project and I'm pretty happy about it. My colleague spiced it up a little bit with some nice buttons. The way it works is quite simple, we will have a UL list with 3 buttons and each of the button has a link with a reference to the right panel. How it scroll to the correct panel? It uses jQuery scroll-To plugin. Basically you just have to pass the ID of the panel to the scroll-To plugin, and it will sroll the content to the correct position.

For more information about the plugin, please visit the scrollTo plugin website

Custom Content Slider

1. HTML

HTML is a little bit long this time. Basically, it has two sections:

  • UL List: This is the list of buttons, you can add as many as you want, or style the layout the way you want.
  • Slider: Slider is where we put all the content for the panels, in this case, we have 3 panels with unique ID panel-1, panel-2 and panel-3. We hide the panel with overflow hidden set in the Mask Div.
<div id="hero-slider">
	<ul>
		<li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
		<li><a href="#" rel="#panel-2">Item 2</a></li>
		<li><a href="#" rel="#panel-3">Item 3</a></li>
	</ul>
	<div class="mask">
		<div class="slider-body">
			<div class="panel" id="panel-1">
				<h2>Title 1</h2>
				<p>Paragraph</p>
			</div>
			<div class="panel" id="panel-2">
				<h2>Title 2</h2>
				<p>Paragraph</p>
			</div>
			<div class="panel" id="panel-3">
				<h2>Title 3</h2>
				<p>Paragraph</p>
			</div>
		</div>
	</div> <!-- .mask -->
	<div class="clear"></div>
</div> <!-- #hero-slider -->

2. CSS

The only tricky part of the CSS would be the mask. You have to make sure it has overflow set to hidden to hide panels. Also, the dimension of the panel and mask must be the same.

#hero-slider {
	text-align:left; 
	background-color:#efefef; 
	border:1px solid #ccc; width:450px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin:0 auto;
	font-family:arial;
}

#hero-slider .mask { 
	float:left; 
	width:300px; 
	height:280px; 
	margin:15px 0 0 10px; 
	overflow:hidden;
}

#hero-slider .panel { 
	width:300px; 
	height:280px; 
	text-align:left;
}

#hero-slider ul {
	margin:0; 
	padding:15px 15px 0 15px; 
	list-style:none; 
	float:left; 
	border-right:1px solid #dedede; 
	height:285px;
}

#hero-slider ul li {
	margin:10px 0;
}

#hero-slider ul a {
	outline:none; 
	text-decoration: underline;
	display:block;
	width:75px; 
	height:74px; 
	text-indent:-999em;	
}

#hero-slider a {
	background: url(button.png) no-repeat 0 0;
}

#hero-slider ul a.active {
	background-position: -75px;
}

.panel h2 {
	padding:15px 0 0 0;
	color:#0058a9;
}

.panel p {
	color:#666;
}

.clear {clear:both}

3. Javascript

Javascript is short and simple, I have added comments to explain every line of the javascript

//append click event to the UL list anchor tag
$('#hero-slider ul a').click(function () {
	
	//reset all the items
	$('#hero-slider ul a').removeClass('active');
		
	//set current item as active
	$(this).addClass('active');	
		
	//scroll it to the right position
	$('.mask').scrollTo($(this).attr('rel'), 300);
		
	//disable click event
	   return false;		
		
});

Conclusion

That's it, a simple script that will able to make your website more interactive. Most importantly, it able to help you use the space wisely and display information in an interesting way. It's simple, and I believe it will be pretty handy for your upcoming web projects.

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

59 comments
kevin Admin 7 years ago
hi myst, i have resolved the issue. thanks for letting me know!
Reply
myst 7 years ago
cannot download, say - not found
Reply
Ralph 7 years ago
Hi Kevin,

Nice little script you wrote at the airport :)
I'm trying to make it scroll horizontally, but the following doesn't work:

$('.mask').scrollTo($(this).attr('rel'), 1200, {axis:'x'});

Any thoughts?
Reply
kevin Admin 7 years ago
Hi Ralph,
You can't do it like that, you have to re-layout the css. I have one tutorial that explain the layout and scrolling, please check this link:

http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

Reply
myst 7 years ago
thank you kevin. :)
Reply
Vern Dempster 7 years ago
What do we have to add to the scripts to make it rotate on a timer through the 3 images and making the left buttons into links to other pages.
Many Thanks
Vern Dempster
Reply
csssample 7 years ago
Excellent blog, Keep posting like this.
Reply
lee 7 years ago
excellent script, one question though: how can you name the navigation to each new "page" instead of having the button.png as the default image? (at the #hero-slider a in the css)
Reply
lee 7 years ago
not worry, found the solution. Lovely script, many thanks
Reply
Dave Van den Eynde 7 years ago
There's an issue with the CSS. Unless you applied it somewhere else, there's still a margin on the panel's h2. This means that initially, the content is too low. When you click on the first item, you'll see it scroll into place.

Also, I suggest you make the first link "active" from the start.
Reply
Dave Van den Eynde 7 years ago
Oh do please disregard that last comment about the active link. I did miss that one.
Reply
kevin Admin 7 years ago
@dave: so I guess it work? :)
Reply
krissy 7 years ago
There is an issue with this jquery loading inside internet explorer 7.
Any ideeas why or whats happening?

here is a link to my site. thanks.
http://dcglamstudio.com
Reply