Create a Custom Content Slider with jQuery

Written by Kevin Liew on 08 Jun 2010
188,623 Views • Tutorials

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
Kasper 12 years ago
Hi Kevin,
Thanks for the great content slider.. Just what I was looking for.
Can you explain how to can add a class so that it is possible to have different icons for each tab..
Where exactly should this class be added in the html and how would it look in css?
Big up.
Reply
Kevin Liew Admin 12 years ago
It will look something like this:

<li><a href="#" rel="#panel-1" class="active icon-1">Item 1</a></li>
<li><a href="#" rel="#panel-2" class="icon-2">Item 2</a></li>
<li><a href="#" rel="#panel-3" class="icon3">Item 3</a></li>

a.icon-1 {
background: transparent url(img.gif) 0 0 no-repeat;
padding-left:20px;
}

Something like that.
Reply
Dewald 12 years ago
Hi, i hope you ca help me, im trying to get this to work as a custom joomla module, it just doesn't want to work? no button click through... any help?
Reply
Christian 12 years ago
this pretty good tutorial thanks
Reply
Kabah 12 years ago
Is there a way to make it automate? Insted you click the buttons the slide moves alone?
Reply
Kevin Liew Admin 12 years ago
Hi Kabah, it's possible by using setInterval method.
Reply
Ferhad 12 years ago
Can you show some samples? i am beginner and i dont know how to do this :/
Reply
John-E. 12 years ago
Hi, great plugin! Bookmarked.

I am using this for a personal project, just for exploring and learning. I am trying to make the scroll go horizontal where the two choice UI-list is in one div, and the divs that should be chosen wich contains one login form and the other a registration form. The anchor-classes are being changed, but the content divs are not being moved or anything. I also would like the ID of the parent list iten (<LI>) to switch between #current and none, is this posible?

Below is a link to pastebinned code that should help create an image of what i want.

http://pastebin.com/RYzd887T
Reply
Christina 11 years ago
This is a great, easy to follow slider. I'm a beginner and was able to figure out everything for myself but one thing--I want this to be clickable, but also rotate automatically if left alone. I assume I need to add this to the script somewhere, but what do I add and where? Thanks for your help :)
Reply
Levi 11 years ago
Thanks for your tutorial!! Its much better than the others because it's simple, and I can modify it easy.. :)

Thank you : Levi
Reply
Kevin 10 years ago
This is brilliant, thank you so much it's exactly what I have been searching for!
Reply
Kevin Smith 10 years ago
Excellent tutorial. I found the comment about converting to a horizontal slider very useful. It may be worth including that information in the main article body. Thanks!
Reply