Create a Custom Content Slider with jQuery

Create a Custom Content Slider with jQuery


Create a Custom Content Slider with jQuery

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.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

59 comments

kevin Admin
Tue, 8th June 2010
hi myst, i have resolved the issue. thanks for letting me know! Reply
myst
Tue, 8th June 2010
cannot download, say - not found Reply
Ralph
Sat, 12th June 2010
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
Mon, 14th June 2010
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
Fri, 18th June 2010
thank you kevin. :) Reply
Vern Dempster
Tue, 22nd June 2010
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
Fri, 25th June 2010
Excellent blog, Keep posting like this. Reply
lee
Sun, 27th June 2010
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
Mon, 28th June 2010
not worry, found the solution. Lovely script, many thanks Reply
Dave Van den Eynde
Sat, 3rd July 2010
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
Sat, 3rd July 2010
Oh do please disregard that last comment about the active link. I did miss that one. Reply
kevin Admin
Sun, 4th July 2010
@dave: so I guess it work? :) Reply
krissy
Wed, 7th July 2010
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
Manhattan
Sat, 10th July 2010
Thanks Kevin for this awesome article, I think there is a problem, when you refresh the page, the slider does not reset ! (Tested in FF, IE)
how to reset slider on refresh?
Thanks Reply
kevin Admin
Sat, 10th July 2010
@krissy: I have tested it with IE 7, it works perfectly.

@manhattan: ok, u need to scroll to the original position on page load. Put this line inside $(document).ready()

$('mask').scrollTo('#panel-1', 0);

Try that, so it scroll to the first item on page load. Reply
Manhattam
Mon, 12th July 2010
Thanks Kevin, but it didn't work. :-(
my code is
<script type="text/javascript">
$(document).ready(function () {

$('#hero-slider ul a').click(function () {
$('.mask').scrollTo('#panel-1', 0);
//reset all the items
$('.mask').scrollTo('#panel-1', 0);
$('#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;

});

});
</script> Reply
Manhattam
Mon, 12th July 2010
Sorry for the repeated line of code. Reply
Manhattam
Mon, 12th July 2010
Oh no, I'm really sorry, it works like a charm. I'm a stupid
Reply
krissy
Wed, 14th July 2010
@Kevin

thanks for replying. It seems there was a problem with conflicting jquery libraries begin called for different functions.

Im a noob to this. but I have tried the custom jquery variable names and had no luck. If you have any insight on making multiple jquery functions work that would be appreciated.

GREAT TUTORIAL!!! CHEERS Reply
peter
Tue, 20th July 2010
Great looking slider.

Just curious - would you be able to do the same thing using .animate()? Reply
Nerf
Fri, 13th August 2010
My slider is not working ... dont get the problem... anyway you could help ?

all pieces of code are same .. hmh jquery files are in the folder.. and css also... wot "could"go wrong? Reply
Anre
Sun, 5th September 2010
How to auto play this...? Reply
kevin Admin
Mon, 6th September 2010
@Nerf: Please download the demo, it should work straight off.

@Anre: unfortunately, it wont auto scroll.

@peter: yes, pretty sure you can but it will take longer times and efforts :) Reply
2tone
Mon, 4th October 2010
Wonderful result! Reply
Adrian
Tue, 2nd November 2010
Great script.
Does this support ajax Reply
Sandip Rajput
Thu, 3rd February 2011
Great script it helpful to me..... thanks ..... :) Reply
Mark
Fri, 25th February 2011
How do I remove the margin on page load from panel 1? It starts off about 20px too low. Reply
Kevin Liew Admin
Sat, 26th February 2011
it has a class called .panel h2, I think it has 15px top padding applied. Reply
Jake
Sat, 7th May 2011
Is there anyway to make this wider? I got the initial content box to the width I'd like, but the text just stays there, as if the content box was still small. Reply
adam
Sun, 5th June 2011
How can I make each icon different per icon? Reply
Kevin Liew Admin
Tue, 7th June 2011
Just add a class for each of the link, and style it accordingly. Reply
Jon
Tue, 7th June 2011
Great script, really easy to use and customise...One problem though -

If I refresh the page while viewing panel 3 (for example), the tab button resets to the first tab however the panel infomation remains as panel 3 (whereas it should reset to panel 1).

I've styled all of my tabs differently so this refreshing issue means the information becomes misleading.

I know this is unlikely to be noticed by users but if there is a solution it would be the icing on the 'tabbed content' cake.

It's probably something simple but my java script knowledge is also.....simple Reply
Kevin Liew Admin
Tue, 7th June 2011
you can put this on page load:

$('.mask').scrollTo('#panel-1', 0);

to make sure it always start from panel 1. Reply
David
Wed, 15th June 2011
Hi Kevin,

First of all, thanks for making this tutorial and sharing the scripts with all of us. I modified the slider to make the icon into purely hyperlinks and make the boxes bigger. This works well on all other browsers except Internet Explorer and I am using IE7 to test it. The problem is the hyperlinks (used to be icons) are not appearing on IE7. Can anyone please highlight to me which part of my script went wrong?

Thank you. Reply
Krez
Fri, 29th July 2011
Hi Kevin! Thank you so much for writing this plugin, it works beautifully! I'm having trouble getting the active class to change correctly though. Whenever I click on another element in the list it seems to make it active but doesn't delete the active class from the previous selection. For example, on page load item 1 is active. If I click on item 2, its class will become active too. But item 1 is still active. This happens with all items on the list.

I thought it might have been something I changed in the css, but I downloaded the files all over again and it still does it. I can't tell any difference between the downloaded files and your demo page.

It happens with both current versions of Chrome and Firefox, not tested in IE yet.

Other than that, your slider works great. Definitely the easiest to use I've seen so far!

Thanks in advance!

-Krez Reply
Kevin Liew Admin
Wed, 24th August 2011
hmm, that kinda weird. It does have the line of code that remove all the active classes before it appends it to the current selected item. Does my demo work correctly? If you changed your class, you will need to change the javascript as well. Must have missed something tiny :) Reply
Jessica
Tue, 23rd August 2011
Hello! Love the slider! I made it into a larger content slider on the site I'm currently working on. I moved the tabs over to the right and converted them to images. It all works wonderfully! Only problem I have is when I click on a new tab, it scrolls the browser window up to the start of the content in the panel. This hides the header and the navigation. It's still able to scroll back up to access it, but I have a feeling our picky client wouldn't been to keen with it. Reply
Kevin Liew Admin
Wed, 24th August 2011
Could be the margin top or padding top of the panel. Try to apply border on the panel, you will able to see the reason why it hides the heading. Reply
Charley Hankins
Thu, 10th November 2011
Great script! I have one little problem tho. When a button is selected it doesn't go back to it's deselected state when another button is selected. All three buttons end up as selected. I haven't altered any code yet. You can see it here: http://vps6479.inmotionhosting.com/~southa12/1.7/slidercontent/
Thanks,
Charley Reply
Kevin Liew Admin
Thu, 10th November 2011
That's weird, it shouldn't display all in selected state. In the script, it clears all the selected state before make the active one selected:

$('#hero-slider ul a').removeClass('active'); Reply
Volkan Algin
Thu, 3rd May 2012
in index.html file replace : $('.customBlock ul a').removeClass('active'); with $('#hero-slider ul a').removeClass('active'); Reply
ganesh kharche
Thu, 10th November 2011
how to make auto scroll this Reply
MUXLIMO
Sun, 8th January 2012
Im sorry Kevin.. i tried it on my blogspot template.. but i failed.. bcos im a newbie here..
Would You please gimme some more detail tutorial for my blog? I tried here:http://muxdemo.blogspot.com/2012/01/demo-2.html
Thanks in advance :) Reply
Yogesh
Fri, 27th January 2012
Nice tutorial and great work Kevin. I want to just know how to make it to scroll horizontally. I want it in one of my current project. I need a horizontal content slider with previous and next arrow keys to slide the content. I don't want to use any plugin for this. Like yours i need a clean code to achieve this. Your help will be greatly appreciated. Reply
Kevin Liew Admin
Wed, 8th February 2012
Horizontally, you need to make sure .slider-body width = total of slides * slide's width.

Then, you need to set #hero-slider .panel float:left.

with that, the panel will align horizontally. For the scrolling part, don't have to worry about it, scrollTo plugin will scroll it by itself as long as you get the arrangement right. Reply
Onie Ross
Thu, 9th February 2012
I know and hope this will help me in my subjects in C++ and for future, ^^ Reply
Lev
Fri, 9th March 2012
You are the my king of Jquery Sliders and the MAIN - the explanation of them !!! Reply
Kasper
Sat, 5th May 2012
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
Sun, 6th May 2012
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
Thu, 7th June 2012
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
Thu, 12th July 2012
this pretty good tutorial thanks Reply
Kabah
Mon, 13th August 2012
Is there a way to make it automate? Insted you click the buttons the slide moves alone? Reply
Kevin Liew Admin
Mon, 13th August 2012
Hi Kabah, it's possible by using setInterval method. Reply
Ferhad
Mon, 3rd September 2012
Can you show some samples? i am beginner and i dont know how to do this :/ Reply
John-E.
Wed, 15th August 2012
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
Fri, 26th October 2012
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
Sat, 6th July 2013
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
Mon, 2nd December 2013
This is brilliant, thank you so much it's exactly what I have been searching for! Reply
Kevin Smith
Fri, 6th December 2013
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement