Yahoo Style Create Featured Content Slider Using jQuery

Add JavaScript Files

view plaincopy to clipboardprint?

1. <code><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" >script>
2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" >script>
3. code>

Content Structure

Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.

view plaincopy to clipboardprint?

1. <div id="featured" >
2. <ul class="ui-tabs-nav">
3. <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographsspan>a>li>
4. <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographsspan>a>li>
5. <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designsspan>a>li>
6. <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshopspan>a>li>
7. ul>
9. <div id="fragment-1" class="ui-tabs-panel" style="">
10. <img src="images/image1.jpg" alt="" />
11. <div class="info" >
12. <h2><a href="#" >15+ Excellent High Speed Photographsa>h2>
13. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read morea>p>
14. div>
15. div>
17. <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
18. <img src="images/image2.jpg" alt="" />
19. <div class="info" >
20. <h2><a href="#" >20 Beautiful Long Exposure Photographsa>h2>
21. <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read morea>p>
22. div>
23. div>
25. <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
26. <img src="images/image3.jpg" alt="" />
27. <div class="info" >
28. <h2><a href="#" >35 Amazing Logo Designsa>h2>
29. <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read morea>p>
30. div>
31. div>
33. <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
34. <img src="images/image4.jpg" alt="" />
35. <div class="info" >
36. <h2><a href="#" >Create a Vintage Photograph in Photoshopa>h2>
37. <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read morea>p>
38. div>
39. div>
40. div>

The CSS Styles

view plaincopy to clipboardprint?

1. #featured{
2. width:400px;
3. padding-right:250px;
4. position:relative;
5. height:250px;
6. background:#fff;
7. border:5px solid #ccc;
8. }

The navigation tabs are absolutely positioned to the right with following styles:

view plaincopy to clipboardprint?

1. #featured ul.ui-tabs-nav{
2. position:absolute;
3. top:0; left:400px;
4. list-style:none;
5. padding:0; margin:0;
6. width:250px;
7. }
8. #featured ul.ui-tabs-nav li{
9. padding:1px 0; padding-left:13px;
10. font-size:12px;
11. color:#666;
12. }
13. #featured ul.ui-tabs-nav li span{
14. font-size:11px; font-family:Verdana;
15. line-height:18px;
16. }

The content panels are given following styles so as to fit them inside featured div container. Theui-tabs-hide class is essential to working of this script as it decides which content panels are hidden and which is displayed.

view plaincopy to clipboardprint?

1. #featured .ui-tabs-panel{
2. width:400px; height:250px;
3. background:#999; position:relative;
4. overflow:hidden;
5. }
6. #featured .ui-tabs-hide{
7. display:none;
8. }

And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.

view plaincopy to clipboardprint?

1. #featured li.ui-tabs-nav-item a{/*On Hover Style*/
2. display:block;
3. height:60px;
4. color:#333; background:#fff;
5. line-height:20px;
6. outline:none;
7. }
8. #featured li.ui-tabs-nav-item a:hover{
9. background:#f2f2f2;
10. }
11. #featured li.ui-tabs-selected{ /*Selected tab style*/
12. background:url('images/selected-item.gif') top left no-repeat;
13. }
14. #featured ul.ui-tabs-nav li.ui-tabs-selected a{
15. background:#ccc;
16. }

Since i used small thumbnail images in the navigation tabs, i applied following styles to them.

view plaincopy to clipboardprint?

1. #featured ul.ui-tabs-nav li img{
2. float:left; margin:2px 5px;
3. background:#fff;
4. padding:2px;
5. border:1px solid #eee;
6. }

Also, in the content panel which is displayed, it has one image of size 400px x 250px and some relavent title and description inside the div with class info. To display .info div over the image i absolutely positioned it over the image with a transparent background to add some eye-candy.

view plaincopy to clipboardprint?

1. #featured .ui-tabs-panel .info{
2. position:absolute;
3. top:180px; left:0;
4. height:70px; width: 400px;
5. background: url('images/transparent-bg.png');
6. }
7. #featured .info h2{
8. font-size:18px; font-family:Georgia, serif;
9. color:#fff; padding:5px; margin:0;
10. overflow:hidden;
11. }
12. #featured .info p{
13. margin:0 5px;
14. font-family:Verdana; font-size:11px;
15. line-height:15px; color:#f0f0f0;
16. }
17. #featured .info a{
18. text-decoration:none;
19. color:#fff;
20. }
21. #featured .info a:hover{
22. text-decoration:underline;
23. }

Note: All the required styles are within style.css file.

The JavaScript Code

Finally the JavaScript code, that’ll make our featured content slider work. I’m using rotating tabs feature of jQuery UI library that makes the content panels rotate automatically after given time interval.

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
3. });

And there you are with a nice looking featured content slider.

How To Use With Latest version of jQuery UI

If you are using the latest jQuery UI version aleady on your website, then do not use the earlier version I am using above, simply change the code as below(Thanks Deni Sri Supriyono for commenting about this):

Just change this line from the JavaScript code:

view plaincopy to clipboardprint?

1. $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

to:

view plaincopy to clipboardprint?

1. $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

Pausing Slideshow on Hover

Here is a nice solution from Vernon(in comments below) for those who were looking to enable pause on hover for the current slide. Use this piece of JavaScript code instead of above.

view plaincopy to clipboardprint?

1. $(document).ready(function(){
2. $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
3. $("#featured").hover(
4. function() {
5. $("#featured").tabs("rotate",0,true);
6. },
7. function() {
8. $("#featured").tabs("rotate",5000,true);
9. }
10. );
11. });