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 the markup. The […]
contentslider

From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.

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.
Previous:
Next:

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

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

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

    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.

    • 5

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

    Hi WEB Family,

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

    Thanks for sharing.

  5. 8

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

    muy bueno.
    quisiera saber como hago para poner el acordion en el centro.

    • 10

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

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

  8. 13

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

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

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

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

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

  13. 21

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

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

  15. 23

    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.

Comments are closed.