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 clicking on one of the menu items, the auto-play function is stopped and the respective content slides out. So, let’s start with […]

View demoDownload source

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.

View demoDownload source

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

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 70

Comments are closed.
  1. 1

    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!

  2. 2

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

  3. 3

    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

  4. 6

    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

  5. 7

    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?

  6. 8

    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.

  7. 9

    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 πŸ˜‰

  8. 10

    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!

  9. 11

    It seems some html-tags get stripped out of the comments here.. so this is what I meant above :

    -Tags = li – tags

  10. 13

    OK, to stop the auto rotate I removed these 2 lines:

    display($(‘#rotmenu li:first’));
    // var slidetime = setInterval(iterate,3000);

    $(‘#rotmenu li’).bind(‘click’,function(e){
    //clearTimeout(slidetime);
    display($(this));
    e.preventDefault();

  11. 14

    Cool tutorial !
    I need to know how I can view this perfectly in IE. because IE not renders rounded corners and also header line of images.

    It’ll be very useful if you can provide any guide on viewing this better in IE browser…

    Thanks

  12. 16

    Hello,

    I am having a problem with the slider using Chrome and Safari. Just viewing the demo in both browsers I get an issue with the last three tabs acting funny. The last two don’t slide back in place once they slide out and the middle one does it kind of sporadically. I get this with both the automatic rotation of the sliders or if I manually click on them.

    Anybody else having this problem or similar?

    Thank you!
    Colt

  13. 17

    Recently I installed this on a real estate web site that runs on php.

    However slider is not works. Images description and headers are not showing.

    When I analyse the page with ‘firebug’ it says that there’s an error in javascript line.

    it says the error comes from “$this.parent().find(‘li:nth-child(‘+current+’) a’).stop(true,true).animate(,300,function(){
    586 $(this).animate(,700); ” line.

    When I deleted this line firebug shows another line that there were an error in that line.

    please tell me a solution to solve this.

    My real estate site runs on ‘open realty’ script.

  14. 18

    Hey Mary Lou, thanks for sharing this. I used it for my website, and apart from a few minor issues it works like a charm. Thanks again.

  15. 19

    I’m still having problems as Brian did with buttons 3-5 sticking. I’ve tried Dennis’ solutions but they don’t seem to work.
    I love the slider but I need help!

  16. 20

    nice but;
    no CSS escape for if JS is disabled and
    it malfunctions… did you realize that at all?

Comments are closed.