Pretty Simple Content Slider with jQuery and CSS3
Tutorials April 28, 2010 by Mary Lou 30 Comments
Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.
So, let’s start with the markup.
The Markup
The HTML consists of a main div called rotator and an unordered list where we will define the menu element, the heading and the description element. The href will designate the regarding content that belongs to the menu item. Here is the markup with two example list elements and the empty list element that we will use to fill the content:
<div class="rotator"> <ul id="rotmenu"> <li> <a href="rot1">Portfolio</a> <div style="display:none;"> <div class="info_image">1.jpg</div> <div class="info_heading">Our Works</div> <div class="info_description"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident... <a href="#" class="more">Read more</a> </div> </div> </li> <li> <a href="rot2">Services</a> <div style="display:none;"> <div class="info_image">2.jpg</div> <div class="info_heading">We serve</div> <div class="info_description"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident... <a href="#" class="more">Read more</a> </div> </div> </li> ... </ul> <div id="rot1"> <img src="" width="800" height="300" class="bg" alt=""/> <div class="heading"> <h1></h1> </div> <div class="description"> <p></p> </div> </div> </div>
We use the information inside of the elements with a info_ class in order to fill our empty structure. The background image will have the source images/ and the image name.
The CSS
The main rotator div will have the following style:
.rotator{
background-color:#222;
width:800px;
height:300px;
margin:0px auto;
position:relative;
font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
color:#fff;
text-transform:uppercase;
letter-spacing:-1px;
border:3px solid #f0f0f0;
overflow:hidden;
-moz-box-shadow:0px 0px 10px #222;
-webkit-box-shadow:0px 0px 10px #222;
box-shadow:0px 0px 10px #222;
}
Since we will give the inner elements some absolute positioning, we need to set the position of the main div to relative. The style of the image that we will insert with the help of jQuery is such an example:
img.bg{
position:absolute;
top:0px;
left:0px;
}
The unordered list with all our elements needs to have a higher z-index then the rest of the elements, since we want it to be on top of everything else. If we would leave it to the default stacking, it would get hidden under the image:
.rotator ul{
list-style:none;
position:absolute;
right:0px;
top:0px;
margin-top:6px;
z-index:999999;
}
.rotator ul li{
display:block;
float:left;
clear:both;
width:260px;
}
The link elements of the menu will have the following style:
.rotator ul li a{
width:230px;
height:52px;
float:right;
clear:both;
padding-left:10px;
text-decoration:none;
display:block;
line-height:52px;
background-color:#222;
margin:1px -20px 1px 0px;
opacity:0.7;
color:#f0f0f0;
font-size:20px;
border:2px solid #000;
border-right:none;
outline:none;
text-shadow:-1px 1px 1px #000;
-moz-border-radius:10px 0px 0px 20px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:20px;
border-top-left-radius:10px;
border-bottom-left-radius:20px;
}
.rotator ul li a:hover{
text-shadow:0px 0px 2px #fff;
}
With the border radius property, we add an asymmetric touch to the menu items. The hover will create a glowing effect.
The content elements and the heading will have the following style:
.rotator .heading{
position:absolute;
top:0px;
left:0px;
width:500px;
}
.rotator .heading h1{
text-shadow:-1px 1px 1px #555;
font-weight:normal;
font-size:46px;
padding:20px;
}
.rotator .description{
width:500px;
height:80px;
position:absolute;
bottom:0px;
left:0px;
padding:20px;
background-color:#222;
-moz-border-radius:0px 10px 0px 0px;
-webkit-border-top-right-radius:10px;
border-top-right-radius:10px;
opacity:0.7;
border-top:2px solid #000;
border-right:2px solid #000;
}
.rotator .description p{
text-shadow:-1px 1px 1px #000;
text-transform:none;
letter-spacing:normal;
line-height:26px;
}
a.more{
color:orange;
text-decoration:none;
text-transform:uppercase;
font-size:10px;
}
a.more:hover{
color:#fff;
}
And now, let’s add some magic.
The JavaScript
First, we need to add the jQuery script and we will also use the jQuery Easing Plugin to create some neat easing effects:
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script>
We will add this after all the content but before the body closing tag.
Then we add this:
$(function() {
/* the index of the current list element */
var current = 1;
/* function to iterate through all the list elements */
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}
/* Initially display the first one */
display($('#rotmenu li:first'));
/* In intervals of 3 seconds jump to the next element */
var slidetime = setInterval(iterate,3000);
/* if the User clicks on one list item, the auto slider stops */
$('#rotmenu li').bind('click',function(e){
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
/* displays each element associated to the "elem" list element */
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;
/* slide in the current one */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});
current = parseInt($this.index() + 1);
var elem = $('a',$this);
/* slide out the clicked or next one */
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
/* the heading and description will slide out, change the content and slide back in */
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
})
/* the image will fade out and another will fade in */
$('#rot1').prepend(
$('![]()
',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html())
.attr('width','800')
.attr('height','300')
);
}
});
And that’s it! I hope you enjoyed this tutorial and find it useful!
P.S. Google Chrome renders this piece pretty nicely so make sure you check it out. The CSS3 properties will not work in any version of IE and the rounded borders will not work in Opera.
You might also like
-
Thumbnails Navigation Gallery with jQuery
-
Slide Down Box Menu with jQuery and CSS3
-
UI Elements: Search Box with Filter and Large Drop Down Menu
-
Awesome Cufonized Fly-out Menu with jQuery and CSS3
-
Sliding Checkbox Actions Menu with jQuery
-
Little Boxes Menu with jQuery
-
Rocking and Rolling Rounded Menu with jQuery
-
A Fresh Bottom Slide Out Menu with jQuery
-
Grungy Random Rotation Menu with jQuery and CSS3
-
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
Fun, I like it
Nice effects but I wish the code was better commented. Hardly understood how the whole thing is put together.
I don’t want to copy/paste this into my file.
Alright, I’ve been taking a look at the code – could you please explain what the ‘current’ variable is doing?
I know its there to point to the current slide item but what is the need for doing .index() + 1. What does adding 1 do? Does it move the counter forward?
the index starts from 0, the nth-child not. so if u use nth-child(current) you need to add 1 to the index value. I guess its that.
Thank you Pankaj! It’s exactly what it’s used for.
@Amit: I am really sorry if you think that it’s not understandable, we will make an effort to explain the jQuery parts in a more step-by-step manner in the future. Thanks for poining that out to us! Cheers, ML
so pretty pretty, i love it ones
thanks ^_^’
Hi WEB Family,
Awesome content slider, this is similar with yahoo´s one although with different design.
Thanks for sharing.
I love it. Exactly what I wanted to implement into a customers homepage I’m working on.
Since I’m a novice in JQuery I couldn’t figure out how to create the hover effect on the sidebar-links and move them together with the sliding images. Thank you.
muy bueno.
quisiera saber como hago para poner el acordion en el centro.
Olá! Do you mean the Elegant Accordion? This content slider is already centered… If you want to center the Elegant Accordion you need to change the absolute position. The left would be 50% and the negative margin-left needs to be half of the width of the whole accordion, which would be -235px. I hope it helps! If you still have problems, just let me know! Cheers, ML
why not works on IE ?
who knows why not works correctly on IE ?
if any body knows please help me , i want to use it in a project .
Hi, great code – very clean and straight forward.
I am very novice JS person – and had the following problem..
Within the description element, I would like the read more link to include a ‘rel’ element which triggers another script to display a jquery lightbox. However whenever the link is within the it does not fire the lightbox – a new page with the link contents are displayed. If I put the link outside these divs – it works fine…
Can anyone help with this – maybe its really obvious what the problem is?
Thanks!!
oops some tags got stripped on submission:
…However whenever the link is within the display:none divs (in ul id=rotmenu) it does not fire the lightbox…..
Hi Faz, the click event of the lightbox should be “live”. If you can change that I am sure it will work. Which plugin are you using?
http://api.jquery.com/live/
Cheers
Hi Cody, thanks for your feedback – the problem is that I am just using a lightbox ‘package’ called Clearbox3 and the code is obfuscated. I have tried to contact the developer – but have heard nothing back as yet.
Basically all I’m doing is calling the clearbox from the more link – all that is needed is to use rel=”clearbox” in the link to fire it…
Maybe its a case of using another lightbox script….or moving the link outside of the hidden div?
Very nice effect. But the read more link (in the image headline) seems to be broken to the next line, which is out of the box. I’m using FF3, and I think it should be fixed (easily).
great code – very clean
Very nice Tutorial, but if you want something without JavaScript, dont’ miss Sliding Image Gallery based on CSS Transition (Step-by-Step Tutorial ).
Very nice and clean accordation but problem is i cannot link the banner image area
Easy to implement, easy to customize, well written article & great results! Keep up the good work – I’ve become a big fan of Codrops rather quickly.
I do agree with the comments on more jQuery notation though, it’s very lacking compared to the documentation on the CSS & HTML.
Very nice effect and awesome tutorial! Thanks for the tut. I’d like to use on my site.
In IE8, the images headings don’t display after the first one has been displayed and the images themselves are out of step with their descripts. In FF it works perfectly – I also notice in IE8 that it appears to show a “broken image” on initial load which maybe explains the issue – I love the script and wonder if there is a simple fix for this. Your demo exhibits exactly the same behaviour as described above.
what a great slider..
nice work..
how can i make a link to a url, when someone click on the list item
Is it possible to replace the navigation links on the right with images, then add a hover effect without having to change much of the JQuery code ?
Thanks
Great Work.
How would I add an active state to the slider so that I can have a different background display between active/hover and not selected?
Broken Initial Image in IE fix:
You can fix this by inserting a spacer.gif or something like that in html code where he has
change to:
to fix that “broken image” in IE, but my problem is the sliding. the thumbnails don’t update their states and after a while clicking on thumbnails the first slide won’t hide. Just seems broken in IE7. works great in Chrome, etc. …please fix…
that didn’t come through right….
img src=”"
img src=”image/spacer.gif”