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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 70

Comments are closed.
  1. 1

    wonderful design but what about adding a preload function for the images? It is talking too long to load the images between clicks.
    Thank you for your very nice work.
    Cheers.

  2. 2

    I am having a problem with the slider using Chrome and Safari. The last 2 tabs are not working properly(they do not slide). The Demo itself is not working on Chrome. Any solution?

  3. 3

    Love this slider, many thanks for making it available. I’m having real issues with IE8 though. The slider either doesn’t rotate images or rotates but the info_description text doesn’t come in animated as it should. Any ideas why? With all other main browsers it works perfect!
    Many thanks,
    Rich.

  4. 5

    I think I found a solution for the tabs problem. There seem to be a problem with the nthchild() selector and chrome /or safari.
    I found a workaround here: http://bugs.jquery.com/ticket/8542. (scroll to comment 3)

    All you have to do is to add a unique class name to each element which the nthChild is referring to. (menu1, menu2 etc.) That worked for me, using chrome. I have started with js recently, so there might be a better and cleaner solution.

    Cheers

  5. 6

    barry’s solution worked perfectly! but to be more clear about what he is saying. You need to add a class= “uniquename” to your li tag

    it looks like this without the tag symbols.

    li class”dummy1″
    a href=”rot1″ ….

Comments are closed.