Pretty Simple Content Slider with jQuery and CSS3

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 […]

From our sponsor: Try Mailchimp today.

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.

Message from TestkingWe offer guaranteed way to pass oracle certification exam using ccent study guide and ccna 640-802 practice exam.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 70

Comments are closed.
  1. 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.

  2. 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?

  3. 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

  4. Hi WEB Family,

    Awesome content slider, this is similar with yahoo´s one although with different design.

    Thanks for sharing.

  5. 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.

  6. 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

  7. who knows why not works correctly on IE ?
    if any body knows please help me , i want to use it in a project .

  8. 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!!

  9. 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…..

  10. 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?

  11. 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).

  12. Very nice and clean accordation but problem is i cannot link the banner image area

  13. 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.

  14. Very nice effect and awesome tutorial! Thanks for the tut. I’d like to use on my site.

  15. 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.

  16. 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

  17. 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?

  18. 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…

  19. Great Slide show!!!

    Would it be possible to make it work properly with that damned IE please.

    Thank you

  20. I like this, but I want to give 1 slide a different size and bgcolor. How to do that?

    I have tried coping and editing description and renamed it to discriptionpink. Here the black discription bg should be pink, but how do I “bound” this to just 1 tab.

    So 1 tab should use descriptionpink while others use the default description

    Thanks

  21. If I’m coming from a previous page and want to link to the “contact” tab instead of the “portfolio” tab, how do i get the “contact” tab to display first instead of the portfolio tab?

    Or is there a way to specify the specific tab to start with ex. “rot3” or the “contact” tab?

    Can someone please help me out with this? 🙂

  22. Where can we go to have an extra marital affair? It seems to me that mated ladies as well as mated guys looking to have affairs all go to the same wedded dating websites. I believe that its a great thing together with no one should have to remain committed to a marriage they dislike very strongly.

  23. Hi There

    This code was a godsend 🙂 Big Thank You attached .-) Was looking for an alternative to Flash for a slideshow, and was able to use a lot of this code to achieve this.

    Was wondering where you purchased/obtained the sample pictures? A designer here would be very interested in purchasing one of them for an up and coming site.

    Best

    Sue

  24. I’m trying to implement this on a site I’m working on (http://fuseedtech.com/services.html). I’ve changed some of the code to fit my template and move some stuff around and now, when the page first appears it shows a thin line towards the bottom. As soon as it rotates to the next item, it disappears and doesn’t come back unless you refresh the page. I can’t figure out how to get rid of it. Can someone take a look and give me some advice?

  25. Nevermind…I found it! Now, a new question: Is there a simple way to make it not auto rotate?

  26. I Want to use this code because if I change width 800 to 1090 for img and CSS ‘rotator’ , that break in IE
    Someone can help me please ?

  27. Love the look and the tutorial’s very easy to follow.

    Just one issue when I was looking at it in IE (of course) 7, the image when scrolling seems to be one behind and changes as soon as it’s off of it’s tab. Any idea how to change this? i’m no jquery expert and the timing was a bit confusing for me 🙂 Thanks!

  28. Great tutorial! But it’s don’t work in IE7/8 please i need it…can you resolve this issue?
    Thank you dude!

  29. Ii IE(7) and Opera 11 slideshow pictures doesn not change after clicking the menu items.

    In Firefox (3.6.1) they do, which is probably the right way, I mean.

    After fixing this it is nice and useful and thank you for publishing.

    Alois, Czech Republic

  30. I have no problems with IE 7, but IE 8: with transparency (filter: alpha (opacity: 70);), the text of the rotator. description does not match.
    Too bad because the work you have done is very beautiful, but unfortunately most people still use IE (grrr. ..)
    Exist a solution?
    Thanks

  31. Great script thnx!!
    I only have 2 problems: first I use a link image for read more. And i want to open fancybox when I click the linkimage, but instead it adds to the url. Is there a fix for this? And in IE I have the same problem as mentioned above, the images behind the layover don’t change when the menu changes, It’s always 1 images behind. Is there s solutuion for this yet?

  32. This is just beautiful (here comes the but) but…the buttons 3-5 don’t seem to retract for lack of better words once the rotator moves to the next image. (In Safari at least)

    I hate to be a PITA but any assistance would be well appreciated. The firing of the titles seem to be off a bit too. I’m not complaining, just pointing it out.

  33. Nice work, really very much apreciated 😉 I’ve implemented it over this site:
    http://www.sailingcharterbaleares.com
    But I have a problem, trying to implement a lightbox images gallery, the images aren’t opened over the lightbox, on the contrary are being opened into a new page.So how could I implement a lightbox gallery?
    Thanks 😉

  34. If anyone has problems like @Brian or me 😉 :

    There are 2 solutions:

    1. If there is no real need to use -Tags… then just do NOT use any -Tags within ..

    2. If you insist on using -Tags within “info_description”, then
    – add to each a class, for example “rotli”, like this:
    – within the script, search replace these strings:
    #rotmenu li -> #rotmenu li.rotli
    li:nth-child -> li.rotli:nth-child
    (‘#rotmenu’).children(‘li’) -> (‘#rotmenu’).children(‘li.rotli’)

    This way it even works in IE7 / IE8. Also tested with FF4.

    BTW: Chrome 11.0.696.60 seems to have a bug about “jQuery :nth-child”.

    This is my favourite teaser, I love it!

    Thanks!