SpyreStudios

Web Design and Development Magazine

  • Design
  • Resources
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Create a Stylish Content Slider using CSS3 & jQuery

September 20, 2010 by Eric Hoffman 32 Comments

With the amount of content available online these days, we sometimes have to resort to using different techniques in order to show/hide/group some content or information on a web page.

Content sliders are very popular because they work and usually don’t hinder usability and in many cases can even improve the user experience. Today we’ll learn how to create a stylish content slider using CSS3 and some jQuery magic.

Stylish Content Slider Demo

Now let’s get to it!

HTML

Let’s start with the HTML. First we’re going to create an unordered list, with four list-items and wrap it all in a div with the id ‘navbar’. Three list-items should have the class ‘inactive’ and one (the active one obviously) should have the ‘active’ class. Two logical choices to add notifications to are ‘Projects’ and ‘To-do’, so create a span with the class ‘notification’ after the link text.

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stylish CSS3 &amp; jQuery Content Slider</title>
<link rel="stylesheet" type="text/css" href="style-slider.css" />
</head>
<body>
<div id="navbar">
<ul>
<li class="active"><a href="#" title="Projects">Projects<span class="notification">34</span></a></li>
<li class="inactive"><a href="#" title="Contacts">Contacts</a></li>
<li class="inactive"><a href="#" title="Earnings">Earnings</a></li>
<li class="inactive"><a href="#" title="To-do">To-do<span class="notification">100</span></a></li>
</ul>
</div>
</body>
</html>
[/html]

Now open up another div, this time with the id ‘slider’. In here you’ll add some content, e.g four headers in ‘h2’ tags and some text in ‘p’ tags after each header. (You can change the text, but don’t change the tags since that’s what we’re going to use to create the slider. If you do add more tags (e.g 5 ‘h2’ tags) you have to have 5 list-items.

[html]
<div id="slider">
<h2>Projects</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. </p>
<h2>Contacts</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. </p>
<h2>Earnings</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. Authoritatively create multifunctional methodologies through premier collaboration and idea-sharing. </p>
<h2>To-do</h2>
<p>Professionally cultivate stand-alone core competencies whereas distributed web services. Rapidiously streamline bleeding-edge total linkage after multidisciplinary networks. Authoritatively create multifunctional methodologies through premier collaboration and idea-sharing. Phosfluorescently evisculate global manufactured products whereas customized total linkage. Appropriately optimize resource maximizing core competencies via an expanded array of functionalities.</p>
</div>
[/html]

That was quick? At the moment it should look like this. Now we’ll add some style to the whole thing.

Preview Image

CSS

If you like you can use Eric Meyer’s CSS reset, but in our case this should be enough.

[html]
* {
margin: 0;
padding: 0;
}

body {
font-family: helvetica, tahoma, Sans-serif;
font-size: 13px;
background: url(images/bg.jpg) repeat;
}
[/html]

Preview Image

Set the margin and padding to 0 (using ‘*’), the font stack to helvetica/tahoma/sans-serif, the font size to 13px and the background to the image on the right → (using the body tag). Make sure you set it to repeat, meaning it won’t display only once, instead it will be repeated horizontally and vertically across the entire page.

Preview Image

Style the links, just add text-decoration: none. In case you have any links in your content part, you may want to add color , etc.

[html]
a {
text-decoration: none;
}
[/html]

Next we’ll style the h2 and paragraph tags. Nothing really hard there except for maybe the text-shadow. The first value is the x-offset, the second is the y-offset, the third is the blur and the last value is the color. More on this at Line25.com.

[html]
h2 {
font-family: Helvetica, tahoma, Sans-serif;
font-size: 25px;
font-weight: bold;
text-shadow: 0 1px 1px white;
}

p {
text-shadow: 0 1px 1px white;
}
[/html]

Next, the navbar div. The width is set to 650px, and margins (top, right, bottom, left) are 20px, 0, 0 and 40px. I personally think that bold font looks better here, but that’s just my opinion :)

[html]
#navbar {
margin: 20px 0 0 40px;
width: 650px;
font-weight: bold;
}
[/html]

All unordered list items should display as an inline block. The ul li a (unordered list-items links) position is set to relative. They should display as a block, have a set width of 150px and text should be aligned in the center. By setting a width and aligning the text in the center, we can assure all list-items have the same width.

[html]
ul li{
display: inline-block;
}

ul li a {
position: relative;
display: block;
width: 150px;
text-align: center;
}
[/html]

Now to the active state of the links. Here I’m using bunches of CSS3, which isn’t supported by all browsers. In case you want to read more about CSS3 support, especially in IE, check out CSS3Pie (thanks @tracker1).

Two things: I recently discovered ‘-webkit-background-clip: padding-box’ via Sneak. Try comparing the border radius with and without the background clip, you’ll definitely notice the difference. Z-index is used to determine the order of overlapping objects, the highest number is at the top.

To remove the ugly outline when clicked on, set the outline of the ‘:focus’ pseudo class to none.

[html]
.active a{
padding: 28px 0 20px 0;
background: -webkit-gradient(linear, left top, left bottom, from(#db0000), to(#9b0000));
background: -moz-linear-gradient(top center, #db0000, #9b0000);
border: 1px solid #8d0000;
text-shadow: 0 1px 1px black;
-webkit-border-radius: 10px 10px 0 0;
-webkit-background-clip: padding-box;
-webkit-box-shadow: inset 0 0 1px #fd0000;
-moz-border-radius: 10px 10px 0 0;
-moz-background-clip: padding-box;
-moz-box-shadow: inset 0 0 1px #fd0000;
margin-left: -5px;
z-index: 2;
color: white;
text-shadow: 0 1px 1px black;
}

.active a:focus {
outline: none;
}
[/html]

Next up: inactive class. The inactive class is similar to the active class, just less padding, a different gradient and no border radius. This time the z-index is 1, since the active button should display above the inactive buttons. Here too, set the outline of the ‘:focus’ pseudo class to none.

[html]
.inactive a:hover {
background: -webkit-gradient(linear, left bottom, left top, from(#eee), to(#ddd));
background: -moz-linear-gradient(top center, #ddd, #eee);
}

.inactive a {
color: #222;
text-shadow: 0 1px 1px white;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
background: -moz-linear-gradient(top center, #eee, #ddd);
-webkit-box-shadow: inset 0 0 5px white;
-moz-box-shadow: inset 0 0 5px white;
padding: 20px 0;
-webkit-box-shadow: inset 0 0 5px white;
-moz-box-shadow: inset 0 0 5px white;
border: 1px solid #ccc;
margin-left: -5px;
z-index: 1;
}

.inactive a:focus {
outline: none;
}
[/html]

Almost done (with the style anyway). You can leave out the notifications, but I think they look good, that’s why I’ve added them. Be sure to set the min-width to 15px so they can’t get any smaller than a perfect circle, and add a margin-left to add some distance between the link text and the circle.

[html]
span.notification {
position: absolute;
padding: 5px;
margin-top: -6px;
color: white;
min-width: 15px;
text-align: center;
border: 1px solid #000;
background: -webkit-gradient(linear, left top, left bottom, from(#2a2a2a), to(#222));
background: -moz-linear-gradient(top center, #2a2a2a, #222);
-webkit-box-shadow: inset 0 0 1px #333;
-moz-box-shadow: inset 0 0 1px #333;
text-shadow: 0 -1px 1px black;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
margin-left: 10px;
}
[/html]

They should look similar to this:

Preview Image

The slider is a div which contains all text content. Set the width to 555px. If you somehow change the width of the list-elements you have to change this value (555px) too. I set the background to ‘rgba(255,255,255,0.3)’. This may be new to some of you. The first three values (separated by commas) is the RGB value of the color (e.g white -> #fff -> 255,255,255). The last value is the opacity, from 0 (invisible) to 1 (100% opacity). If you know the hex value of a color, but not the RGB value (or vice versa) you can use this helpful app called Hex-to-RGB Conversion.

[html]
#slider {
width: 555px;
background: rgba(250,250,250,0.3);
padding: 30px 25px 30px 25px;
line-height: 25px;
margin-left: 35px;
}
[/html]

This is what you should have so far:

Preview Image

jQuery

Now your design should be looking pretty good, but there’s one problem: try clicking on a link. Does it work? No, I thought so. This is where jQuery comes in. A friend introduced me to this (fabulous, awesome, incredible…) javascript framework and I’ve using it ever since. I’m still a novice, but this code is pretty simple.

In your head section, import Google’s jQuery library and create two script tags to insert your code (directly before the header closing tag).

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

</script>
[/html]

We’ll start out with document -> ready -> function. What this tells the browser is that once the document has loaded, execute the function inside the curly brackets.

[html]
$(document).ready(function(){
});
[/html]

Next we’ll create the click function. When the user clicks on a ‘li’ element, the following function is performed.

[html]
$(‘li’).click(function(){
});
[/html]

First, assign the variable ‘number’ to this’ index. ‘This’ is the ‘li’ element we clicked on. Since we don’t have different classes for each list-item, ‘.index()’ gets which position the item has (starting with 0. e.g I click on the second list-item (contacts) and index would return ‘1’).

[html]
$(‘li’).click(function(){
var number = $(this).index();
});
[/html]

We’ll continue with this:

[html]
$(‘li’).click(function(){
var number = $(this).index();
$(‘h2’).hide().eq(number).show();
$(‘p’).hide().eq(number).show();
});
[/html]

This piece of code is quite simple. It selects all ‘h2’ (respectively ‘p’) elements and hides them, except if their position (eq) is equal to that of ‘this’ (var number), meaning it shows them. The jQuery docs page does a great job at explaining this by the way.

Next we’ll toggle the classes of the list-item (still ‘this’) clicked on with toggleClass, remove the active class and add the inactive class to all ‘li’s that are not ‘this’. After that we can close the click function.

[html]
$(‘li’).click(function(){
var number = $(this).index();
$(‘h2’).hide().eq(number).show();
$(‘p’).hide().eq(number).show();
$(this).toggleClass(‘active inactive’);
$(‘li’).not(this).removeClass(‘active’).addClass(‘inactive’);
});
[/html]

Finally we’ll select all h2 (and p) elements that aren’t the first of their kind and hide them. This will only be executed once, and only to make sure only the ‘Projects’ heading and paragraph text is displayed.

[html]
$(document).ready(function(){
$(‘li’).click(function(){
var number = $(this).index();
$(‘h2’).hide().eq(number).show();
$(‘p’).hide().eq(number).show();
$(this).toggleClass(‘active inactive’);
$(‘li’).not(this).removeClass(‘active’).addClass(‘inactive’);
});

$(‘h2’).not(‘:first’).hide();
$(‘p’).not(‘:first’).hide();

});
[/html]

Final result:

Stylish Content Slider Demo

Demo & Download

You can view the demo here or click here to download a zip file that contains all demo files → (25kb) (downloaded [download#21#hits] times already!)

Conclusion – Share Your Thoughts

Well, we’re done. I hope you enjoyed this tutorial and improved your coding skills by a little (or by far). Please leave your opinion in the comment section. Constructive feedback is welcome! :)

Filed Under: CSS, Design, jQuery, Tutorial

Comments

  1. Nico Schneider says

    September 20, 2010 at 2:24 pm

    Problem is, if you click a LI twice, it will have the “inactive” class due to the use of toggle() … otherwise, nice one! :)

  2. Pierre-Yves Lapointe Brisson says

    September 20, 2010 at 3:11 pm

    My concern is that CSS3 is not supported by our grandpas browsers (See: IE7) which won’t support all CSS3 selectors… This slider looks great, but I guess I’ll have to patch some CSS3 code with jQuery in order to have it fully compatible!

    Any hint?

    Thanks for your great article!

  3. Eric says

    September 20, 2010 at 3:15 pm

    @Nico Opps! Not intended :). Thanks :)

  4. Eric says

    September 20, 2010 at 3:19 pm

    @Pierre Yes, I know CSS3 is not supported by some browsers. If you like, you can replace CSS3 elements (like gradients etc.) with images. I like using CSS3 because it’s clean and easy to edit. An article (by yours truly) should show up soon (follow me on twitter, I’ll tweet about it) on the pros and cons of CSS3.

    Thanks:)

    Eric

  5. Mark Narusson says

    September 20, 2010 at 3:29 pm

    Nice tutorial Eric – many thanks :)

  6. Brett Widmann says

    September 20, 2010 at 6:02 pm

    Great tutorial, and great follow up to commenters’ questions. :)

  7. Kiran Voleti says

    September 21, 2010 at 1:23 am

    Well explained.Good tutorial.

  8. Eric says

    September 21, 2010 at 2:58 am

    Thanks @brett! And thanks for all the tweets!

  9. Chris says

    September 21, 2010 at 3:00 am

    Hello,
    this is a great one. And it looks good too.
    Still there are some rendering issues in Iron (which is basically the same as chrome). It looks like the background has no border-radius. The boxes actually do have it.
    Any recommendations how to solve this?

  10. Inpixelitrust says

    September 21, 2010 at 3:52 am

    Hi nice tut :)

    But … Am I the only on who gets square corners around the rounded corners on chrome (6.0.472.62 updated yesterday)

  11. Eric says

    September 21, 2010 at 4:08 am

    Thanks! @Chris, could you show me an image of the issue?

  12. Joost Kiens says

    September 21, 2010 at 4:12 am

    Nice!

    Apparently the -webkit-box-shadow with the inset property prevents the -webkit-border-radius from clipping the background.

    So the rectangular background pops out from behind the rounded corners, both on a and span > a.

    This is in Chromium 7.0.528.0 (59761) Ubuntu 10.04.

  13. Childmonster says

    September 21, 2010 at 7:21 am

    This is very good. Thanks for share

  14. haz says

    September 21, 2010 at 8:28 am

    i dont think it works in chrome

  15. Arslan says

    September 21, 2010 at 9:04 am

    Good tutorial. Thanks

  16. Ahmad Alfy says

    September 21, 2010 at 11:36 am

    Working fine but looks bad in web-kit based browsers…
    The rounded top corners of the tabs have a red background and the numbers are surrounded by squares beside the circles …

  17. Greg says

    September 21, 2010 at 12:51 pm

    I’m not sure what’s up… but the demo doesn’t work in Opera at all (tabs don’t even render), and in Fx and Chrome the tabs look fine but no sliding happens; it’s just a tabbed content area.

    I admit I’m at a loss for attention sometimes, so I didn’t read the whole article; I just jumped right to the demo to see how it looked in order to decide if I wanted to follow the tutorial. If it’s meant to be a tabbed area with no animation (sliding) then maybe it’s working after all. ;-)

  18. Eric says

    September 21, 2010 at 1:36 pm

    Thanks! @haz could it be that you are using an older version of chrome, since I’m using 7.0.517.8 (I think…) and it displays correctly.

  19. Eric says

    September 21, 2010 at 1:37 pm

    It only works in webkit browsers. Maybe you should update you browsers?

  20. Jon Phillips says

    September 21, 2010 at 1:47 pm

    I’ve tested it in Safari 5.0.2, Chrome 6.0.472.62 and Firefox 3.6.3 it displayed ok in all 3 browsers (Mac OS X 10.6.4) all the effects rendered fine. I also tried it in Opera and as Greg mentioned above, the tabs don’t render, but the layout is still functional.

  21. Michael Pehl says

    September 22, 2010 at 3:22 am

    Hm I’ve just downloaded the demo and there is no sliding at all.
    Tested in latest Chrome 6.0.472.62 … nothing, Sir.

    I will dig into the code. :)

  22. Michael Pehl says

    September 22, 2010 at 3:29 am

    Okay, the jQuery code could look like this (at least this code works for me):

    [code]
    $(document).ready(function(){
    $(‘li’).click(function(){
    var number = $(this).index();
    $(‘h2’).slideUp(400).eq(number).slideDown(400);
    $(‘p’).slideUp(400).eq(number).slideDown(400);
    $(this).toggleClass(‘active inactive’);
    $(‘li’).not(this).removeClass(‘active’).addClass(‘inactive’);
    });

    $(‘h2’).not(‘:first’).hide();
    $(‘p’).not(‘:first’).hide();

    });
    [/code]

  23. Michael Pehl says

    September 22, 2010 at 3:30 am

    $(‘h2’).slideUp(400).eq(number).slideDown(400);
    $(‘p’).slideUp(400).eq(number).slideDown(400);

  24. Michael Pehl says

    September 22, 2010 at 3:41 am

    Oh sorry, please delete my comment before this one. I have modified the code again to prevent the active/inactive thing:

    It could look like this:

    $(document).ready(function(){

    $(‘li’).click(function(){
    var number = $(this).index();
    $(‘h2’).slideUp(400).eq(number).slideDown(400);
    $(‘p’).slideUp(400).eq(number).slideDown(400);
    $(‘li’).removeClass(‘inactive’).addClass(‘active’);
    $(‘li’).not(this).removeClass(‘active’).addClass(‘inactive’);
    });

    $(‘h2’).not(‘:first’).hide();
    $(‘p’).not(‘:first’).hide();
    });

  25. Eric says

    September 22, 2010 at 6:04 am

    Thanks @Michael! It doesn’t have a sliding effect, it uses fade in and out. :)

    Eric

  26. Eric says

    September 22, 2010 at 6:07 am

    Here’s the code: http://jsfiddle.net/bcJHC/1/

  27. Greg says

    September 22, 2010 at 8:27 pm

    See, the version at jsfiddle ‘works’. It’d definitely doing slideDown. The demo from here doesn’t work on the latest stable build of Chrome.

  28. Jon Phillips says

    September 23, 2010 at 2:13 am

    @Greg: That’s weird, I just tried it again in Chrome (latest build) and it worked just fine. In fact both the demo here and the one on jsfiddle worked ok for me using Chrome, Safari and Firefox – all latest versions.

  29. Michael Pehl says

    September 23, 2010 at 2:26 am

    The jsfiddle demo is the code I provided.

    As far as I know CSS3 fading is done with transitions, no?
    In the demo code (downloaded) there is no transition in the CSS… huh?

  30. patrick l says

    October 18, 2010 at 1:32 am

    Hi Guys,

    Nice work!
    I’m looking into these content sliders right now and i wonder if there is any study or best practice for the ‘perfect’ time between a slide and the ‘perfect’ number of images.
    I tried to count and measure myself everytime i stumbled upon a content slider but the results weren’t really satisfying…

  31. Kalaiyappan says

    April 24, 2011 at 4:33 am

    hi,
    really cool tutorial.I have started learning web design only know in that way this tutorial is really cool.

    Can you help me out with this?
    ——————————————
    I am trying to develop a website.I am using more number of list items, in different classes.when i try using this code the effect is getting applied to all my list items.So how can i add a particular class to this list?so that the effect is applied only the class of list where i am using these…..please help!!!!

  32. Elena says

    July 23, 2011 at 3:31 am

    It’s very beautiful slider. I tried and change this slider to vertical and it’s open like new pages. Can you help me with the following?
    I want to have an anchor which the hyperlink goes to another page and the second h2 of navbar , i tried this but always goes to the first h2 of navbar. Always when i load a page like http://www.example.com/test.htm#test2 doesn’t load the second (test2 is the second from the list) but always the first .

    (these two pages has this slider but vertical)

    Thanks .

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • How to Choose a Stunning Font Package for Your Brand
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022