Create Featured Content Slider Using jQuery UI

Jun 17th, 2009 – 181 Comments »
Share: (1218) Delicious FacebookPosted in jQuery Popular

Featured Content Slider using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.

Let’s start with it..

Add JavaScript Files
First of all, grab the jQuery and jQuery UI libraries, if you haven’t already and include them in your page header. For this tutorial, you’ll need jQuery UI version 1.5.3. I usually use Google AJAX libraries to load jQuery and jQuery UI files as it acts as a CDN for your JavaScript files.

view plaincopy to clipboardprint?
<code><script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” ></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js” ></script>
</code>

The Featured 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?
<div id=”featured” >
<ul class=”ui-tabs-nav”>
<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 Photographs</span></a></li>
<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 Photographs</span></a></li>
<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 Designs</span></a></li>
<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 Photoshop</span></a></li>
</ul>
<!– First Content –>
<div id=”fragment-1″ class=”ui-tabs-panel” style=””>
<img src=”images/image1.jpg” alt=”” />
<div class=”info” >
<h2><a href=”#” >15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam….<a href=”#” >read more</a></p>
</div>
</div>
<!– Second Content –>
<div id=”fragment-2″ class=”ui-tabs-panel ui-tabs-hide” style=””>
<img src=”images/image2.jpg” alt=”” />
<div class=”info” >
<h2><a href=”#” >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit….<a href=”#” >read more</a></p>
</div>
</div>
<!– Third Content –>
<div id=”fragment-3″ class=”ui-tabs-panel ui-tabs-hide” style=””>
<img src=”images/image3.jpg” alt=”” />
<div class=”info” >
<h2><a href=”#” >35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare….<a href=”#” >read more</a></p>
</div>
</div>
<!– Fourth Content –>
<div id=”fragment-4″ class=”ui-tabs-panel ui-tabs-hide” style=””>
<img src=”images/image4.jpg” alt=”” />
<div class=”info” >
<h2><a href=”#” >Create a Vintage Photograph in Photoshop</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales….<a href=”#” >read more</a></p>
</div>
</div>
</div>
The class names ui-tabs-selected and ui-tabs-hide should not be changed, you can change other class names to your own.

The CSS Styles
Now for the CSS part, I fixed the width and height of the outer container div with id #featured and added a right padding of 250px to make space for the absolutely positioned navigation tabs for our featured content slider. Also, i set its position attribute to relative so that i can absolutely position elements inside #featured div relative to it.

view plaincopy to clipboardprint?
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
The navigation tabs are absolutely positioned to the right with following styles:

view plaincopy to clipboardprint?
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
The content panels are given following styles so as to fit them inside featured div container. The ui-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?
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
And the selected tab is given a background image with a left arrow. Here are the styles for selected tab.

view plaincopy to clipboardprint?
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url(‘images/selected-item.gif’) top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
Since i used small thumbnail images in the navigation tabs, i applied following styles to them.

view plaincopy to clipboardprint?
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
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?
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url(‘images/transparent-bg.png’);
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
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?
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});
And there you are with a nice looking featured content slider.

View Working Demo or Download the source code and try it.

Update(Aug 20, 2008)

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?
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
to:

view plaincopy to clipboardprint?
$(“#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?
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”,0,true);
},
function() {
$(“#featured”).tabs(“rotate”,5000,true);
}
);
});
Tags: content slider jquery ui

Bookmark n Share
Bookmark to Delicious
1218 bookmarks so far
Stumble this article
digg

Subscribe to Full RSS Feed
RSS FeedIf you found this article useful, then consider subscribing to our RSS Feed or e-mail updates to stay updated with latest Web Design/ Development articles. You can also follow @webdevplus on twitter for latest updates.

Related Posts
Create Flipping Content Tabs Using jQuery
Creating Content Tabs with jQuery
Create a Dynamic Scrolling Content Box Using AJAX
181 Responses (Add Your Comment)
iwpdesign says:
June 17, 2009 at 1:16 PM
Very nice. I will use this tutorial on my next wordpress project wich wil be a portfolio theme 🙂

webdeveloperplus says:
June 17, 2009 at 1:49 PM
glad you found this useful 🙂

Ismail says:
October 2, 2009 at 8:23 PM
I am very thankful for this . it really saved my day

Jesse says:
June 18, 2009 at 12:28 AM
This looks great! Excellent application of the UI. I swear, soon you won’t be able to tell the difference between js and flash photo sliders. Nice!

webdeveloperplus says:
June 18, 2009 at 6:16 AM
definitely Jesse, jQuery UI has full potential to act as Flash replacement in most cases.

Simon says:
June 18, 2009 at 1:13 PM
Damn, unbelievable how you can obtain a great slideshow with so little javascript !
I definitly have to take a closer look at jquery UI. Even with jquery you would have a longer code.
Very nice, thanks !
But for firefox users a little:
a:active, a:focus {outline: 0;}
could be nice because of the dotted outline on firefox 😉

sam says:
June 18, 2009 at 3:39 PM
awesome work. I’ve been trying to do this for a while..

shin says:
June 18, 2009 at 10:04 PM
An excellent application of jquery UI. Well done and thank you for sharing.

When I see it with IEtexter IE7 (and IE6) the div class=”info” content is off to left about 20px.
It looks great with iE8. I guess we can add a conditional statement.

Naresh says:
June 19, 2009 at 8:12 AM
awesome tutorial. great work. i have bookmarked this page.

sonichtml says:
June 21, 2009 at 3:03 PM
very nice..thank you

mrki says:
June 21, 2009 at 3:44 PM
great tutorial. will port it to a cms as a block. thank you very much

szabaduszo says:
June 21, 2009 at 4:24 PM
thanks, great tut. I will use it.

Rahul Jadhav says:
June 21, 2009 at 5:00 PM
I need some help. It isnt appearing properly in Internet Explorer.
Please check my test blog with IE
http://testing4j.blogspot.com

Otherwise its working great in all the other browsers. Thanks for the great slider 🙂

webdeveloperplus says:
June 22, 2009 at 11:32 AM
IE 7 or earlier have some problems with CSS styles and the transparency effects. You should use css opacity filter to get the similar effect in IE.

Rahul Jadhav says:
June 22, 2009 at 4:11 PM
Hey can you tell how to create a slider like the one at http://www.goal.com

Its similar to yours but there is a small button which allows more than 4 post in the slider

webdeveloperplus says:
June 22, 2009 at 9:38 PM
that type of effect will require some javascript code, that might require using Coda-slider jQuery plugin to control view of thumbnails.
and btw, nice implementation of this featured content tutorial on your blog 🙂

Ionut Staicu says:
June 21, 2009 at 8:15 PM
I really don’t think it’s a good idea to load UI only for this thing. You can achieve same effect with less code than UI (with jquery though)

hcabbos says:
June 21, 2009 at 8:28 PM
So awesome! Is there any way to make it partially work if JS is disabled? By that I mean each slide is shown when clicked.

Thomas says:
June 21, 2009 at 8:53 PM
Wonderful! One thing though, If you include “a { outline: none; }” in your CSS, it gets rid of those nasty navigation image outlines when you select one.

Andrew says:
June 21, 2009 at 9:45 PM
Is it possible for the right column to scroll to allow more thumbs?

webdeveloperplus says:
June 22, 2009 at 11:28 AM
definitely Andrew, we can fix the height of ul element and set its overflow property to scroll or auto

Vamsi K says:
June 21, 2009 at 10:47 PM
Thank you for the tutorial! I always wanted to implement this on my website.

Max says:
June 21, 2009 at 11:29 PM
This looks great, is there a quick way to make the slider stop when i scroll over the content, instead of it continuing to the next item ?

PS – Im a Jquery noobie

WOLF says:
June 22, 2009 at 12:02 AM
Great implementation! Love it! Are you planning to make this a wordpress plugin for featured articles? Because if you did I can see this become one of the most popular ones!!!

Thank You!

webdeveloperplus says:
June 22, 2009 at 11:27 AM
Thanks Wolf, would consider your suggestion.

WOLF says:
June 22, 2009 at 12:03 PM
Can’t wait! 😉 That would be great! 😉 Keep up the good work!

dirk says:
June 22, 2009 at 3:52 AM
Two things that dissapoints me:
= What when you have many more Thumbs…
= Why is the transition not without the WHITE but truely pic to pic?

When linking your JS scripts straight to google instead of copying over locally, you make your pages awfully slowm and dependantly of google being online?

WOLF says:
June 22, 2009 at 12:04 PM
anything you like?

insic says:
June 22, 2009 at 12:45 PM
nice work! 😉

joxxe says:
June 22, 2009 at 7:48 PM
Very thanks for this, but i have 1 problem, how can i show the info div outside at the bottom of the box, for have more space where xplain my products, hope your help, thanks very much.

webdeveloperplus says:
June 22, 2009 at 9:25 PM
that’ll require a bit of CSS tweaks to the info div to position it absolutely below the slider box

Rahul Jadhav says:
June 22, 2009 at 10:21 PM
Thanks 🙂 But I had to remove the “padding-right:250px;” from
#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
for the slider to work properly in IE. I removed it and adjusted the value of width. Now it works properly in all browsers.

Btw can u please implement the thing used by http://www.goal.com as I dont have any knowledge about Javascript

Travis says:
June 23, 2009 at 12:00 AM
Is there a reason this requires jQuery UI version 1.5.3 and not the latest stable (1.7.2)?

webdeveloperplus says:
June 23, 2009 at 5:36 AM
jquery UI 1.7.2 needs different IDs to understand tabs structure, i used the one that jquery UI 1.5.3 uses. so you just need to use the tabs structure as defined by jQuery 1.7.2 if you wish to use it.

lebisol says:
July 24, 2009 at 5:12 AM
Is there a chart or a guide that lists the classes?
I have tried to use Jquery UI but everything seems to be ‘themed’ so 1 change on tabs trickles down to accordion, sliders etc.
Based on what do I name classes and then chain them as “ui-tabs-panel ui-tabs-hide”?
I have no problems making xhtml and css to my liking BUT mixing it with UI css seems to be a complete nightmare…
Thanks!

joxxxe says:
June 23, 2009 at 5:35 AM
I did try but i dont have good results on changing image display, i wanna add more thumbs and show the descripcion under both columns, please help me, many thanks.

Dré says:
June 23, 2009 at 9:06 PM
Great work. Maybe for the next update add a “onmouseoverpause” function.
I’ll keep this in mind.
thnx for sharing!

alemao says:
June 28, 2009 at 12:51 PM
Hi,
i do love your script, but i dont get it running on my website, because i am already using jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js (for tabs and accordeon) so when i include this one it doesnt work, it show ups corretly but io cant navigate through it .
Can you please be more specific -maybe a small tutorial how to use the tab structure of jquery-ui-1.7.2.custom.min.js
Would be great. Thanks

Aaron Allen says:
June 30, 2009 at 12:18 AM
Hey there, this is a really great feature that I’ve been looking into implementing on my site and I really like yours! One question though, and I haven’t been able to get it working so far:

How do I get the two sections of content to be swapped? I want the navigation on the left, which I am able to do by changing the div “featured ul.ui-tabs-nav” to have no padding. How would I go about getting the content to move over the 250 pixels?

Thank you,
Aaron

Deny Sri Supriyono says:
July 2, 2009 at 7:15 AM
nice tutorial, easy to implement and great slider, mate! 🙂

@alemao: on my trial with jquery 1.3.2, jquery ui core 1.7.1 and jquery tabs 1.7.1 (all scripts using javascript bundled from wordpress installation), it works perfect.

i just change this line from the javascript code:

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

to:

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

i have not try it with 1.7.2.

banny says:
July 2, 2009 at 3:42 PM
hi
nice n great tut
but help me plzzzz
i want to implement a way so that the pix selector on left can randomly populate its list
like there is a car at the first pic
but on next page visit or refresh there shud be next or another randomly selected pic on the top selected first and so on instead of the car i hope u get wat i meant to ask help me thnx

Don says:
July 2, 2009 at 6:33 PM
@Deny Sri Supriyono It works well on UI 1.7.2.

Still trying to figure out how to fade-in/out simultaneously instead of the white out

Van says:
August 6, 2009 at 2:20 AM
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});

this is the code that works with 1.7.2 ????? In my case id doesnt work…:(((((((

Shane – Inspiring Your Success says:
July 2, 2009 at 10:45 PM
Hey I am trying to implement this but the main box does not change! http://www.sussexvision.com

Bazmo says:
July 7, 2009 at 6:19 AM
It seems you may be using jQuery UI 1.7.x if so then browse the comments above you.

Niaz A Morshed says:
July 5, 2009 at 4:14 PM
I want to use more than 4 pictures but want the size of the image frame to be as it is. What to do? Thanks in advance for your solution. Not to say, a very nice plugin! 🙂

Ryan Gliozzo says:
July 8, 2009 at 4:49 PM
great tutorial and a great way to implement jquery for featured content. I am really getting into jquery at the moment, it is adding a whole new dimension to my websites. I have been implementing a lot of plugins on the new website I am doing for my kid’s school, and this is a welcome addition!

V.C says:
July 13, 2009 at 2:38 PM
I was wondering if you could make a plugin from this awesome tips.
I think it’s good for newbie like me.
Thank you for this tips

Anna L. says:
July 13, 2009 at 5:14 PM
It works like a miracle… I’m a begginer in jQuery adoption so such tutorals are extremely helpful. Thank you a lot.

SPbb says:
July 13, 2009 at 11:25 PM
jQuery UI 1.7.2 works fine for me..

THANKS ALOT! U REALLY HELP US! KEEPUP THE GOOD WORK!

Van says:
August 6, 2009 at 2:30 AM
it doesnt work for me, can you post the code or your site ? i use 1.7.2 and it doesnt work..:(

Abu Farhan says:
July 18, 2009 at 6:35 AM
This one I looking for, other slide show only show image strip at bottom or top, but this one have title. I’ll use for my wodpress theme, Can you make tutorial to apply in WordPress that use jquery from wordpress in plugin, because have “no conflict” in jquery. one more question, can I add more than 4 Image ?

J says:
July 21, 2009 at 12:39 AM
Is there any way to change the timing of the slide changes? I’d like it to be longer. Thanks!

Bazmo says:
July 21, 2009 at 7:28 AM
Yes,

tabs(“rotate”, 5000, true);

Set the 5000 (5 seconds) to something higher.

Also if you remove the ‘true’ the tabs will stop rotating once they’ve been clicked on.

J says:
July 21, 2009 at 7:52 PM
Thanks!

SessizCrew says:
July 24, 2009 at 9:58 PM
Thanks 🙂

Neel says:
July 25, 2009 at 6:57 PM
I want to use this script on one wordpress project. But I want to use more images. But for thumbnails I want to show only 4 and when it moves at the 4th thumbnail i want the 4 thumbnails to scroll one step at top.
Can you give me any suggestion how to implement this.

Seb says:
July 27, 2009 at 3:02 PM
Whooow! Works very well ! thanks for sharing your code.

The only thing that makes me hesitate to use definitively your code on my website is the size of the jquery ui to be downloaded for each client:
jquery-ui.1.5.3.min.js >> 180 Ko
and jquery-1.3.2..min.js >> 52 ko
>>232 ko for this content slider.
That is pretty much than the others. Yes the quality has a weight but I think it is a little too much.

Would it be possible to reduce the .js size?
Thanks ! 🙂
Seb

alfred says:
July 27, 2009 at 4:52 PM
Thanks!!… Great!… And not only works with images!!… i can put a swf in the slider!… and then a video!

….

If the Slider admit more than four “fragments/panels”, for example with a scrollable thumbs, it would be perfect =)

Thanks again!!

Neel says:
July 27, 2009 at 5:29 PM
Hi Any solution for my problem. I am waiting for a reply from you

webdeveloperplus says:
July 27, 2009 at 6:16 PM
the solution to your problem is somewhat difficult as this slider uses jQuery UI Tabs, most likely you should make your thumbnails scroll up when the 4th item is shown by coding on the show event of tabs.
Refer to Events documentation of jQuery tabs here: http://www.jqueryui.com/demos/tabs/ for more detail on how to catch the show event of jquery UI Tabs

Neel says:
July 28, 2009 at 5:56 PM
Thanks for your help. I will try to find any solution for my problem

Vivekanand says:
July 28, 2009 at 12:29 AM
Hi,

I would like to customize this code as per my requirement, since this going to help me a lot and I would like to thank you for your valuable effort on developing this one. Really, this has helped me a not on my upcoming and about to launch website.

Thanks a lot again, cheers! keep up the spirit….. Rock the Web World!

Thanks,
Vivek
[Founder of Developer Snippets: http://www.developersnippets.com

shiva says:
July 28, 2009 at 6:44 PM
Hi ,

I have used this content slider in my website , but onthing i want to implement is dynamic background image for each div (Featured-1 (haveone background image ) featured -2 have another background image) how do i do that.

#featured .ui-tabs-panel{
width:300px; height:300px;
background:url(edges.jpg’); position:relative;

}

this will be constant ..
want to have one background for each div info.

pls help.

webdeveloperplus says:
July 28, 2009 at 8:31 PM
add unique classes to each of the div and then use custom background for each

umesh chand says:
August 6, 2009 at 11:57 AM
Its very nice but i want one facility.If i put mouse pointer over the image it should be stoped.Can it possible

mehmet says:
August 6, 2009 at 6:04 PM
Great plugin.. thanks..
is it possible to place thumbs “under” main content , not on the right?

Kaan says:
August 7, 2009 at 3:22 AM
Thanks a lot for sharing this great plug-in.

nano says:
August 12, 2009 at 7:42 AM
how much is the max images ? 4 or N ?
i want rotate 8 news …. is valid ????????
anything special configuration ????????????

Thad says:
August 12, 2009 at 7:53 PM
Is there a plugin or something for this available with WordPress?

Charllyano says:
August 13, 2009 at 2:17 PM
I’m very much greatful having this code Thanks very much for that !!!!

Mohamed kaja says:
August 13, 2009 at 5:46 PM
Hi,
Thanks a lot.good work.

But the effects are not working in ie6 browsers.any thing i need to do?

alpin says:
August 14, 2009 at 7:44 PM
very simple descriptions, thanks

Mark says:
August 16, 2009 at 6:23 AM
Hello.
Thank you for your great library.

I was using the WordPress plugin.
Now is the personal use.
There was a request to use the plug-in from a friend.
Missing license for this library is currently pending.

This library is licensed?

webdeveloperplus says:
August 16, 2009 at 6:28 AM
You are free to use or modify the provided code in any way you like, but since jQuery and jQuery UI libraries are also required, please refer to their licenses too

Tim says:
August 19, 2009 at 2:54 AM
Hello, Thanks for your works. I would like to use it in my new website. One thing I have problem with though. I have a JQury drop down menu just above this slider. And I cannot “overlay” your slider when the menu drop down. Can you help?

Appreciate!
Tim

webdeveloperplus says:
August 19, 2009 at 5:26 AM
try increasing the z-index CSS property for your drop down list items to a higher number like 9999

Tim says:
August 19, 2009 at 5:44 AM
Thank you very much!

marujo says:
August 20, 2009 at 10:42 PM
hi. its very cool. it works with wordpress, to show posts?

Amy says:
August 24, 2009 at 7:24 AM
I love this tutorial. Thank you.

I need to adjust my large images approximately margin: -20px, -20px, 0px, 0px and nothing I’ve tried has worked. Any ideas for a workaround?

Thanks again for this great tutorial. Other than this small issue, it was easy to install.

Amy says:
August 24, 2009 at 7:33 AM
Sorry – found a work around immediately after I sent this comment.

Jeremy says:
August 25, 2009 at 11:16 PM
I cant get mine to cycle through. Im VERY new at all this. Can someone please check out my site and help me out?

http://www.greenspeedmagazine.com/fusion/files

Im not sure where to put the code:

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

Do I need to install jquery on my server and then link to mine instead of the one listed in the code above? I desperately need help.

Thanks!

Jeremy says:
August 25, 2009 at 11:28 PM
So I tried to install jquery on my site and it screwed it all up. if you try going to my site:

http://www.greenspeedmagazine.com/fusion/files it wont work now it just takes you to a jquery messages page. What is going on? I even deleted jquery from my server, how do I fix this?

and for help with my slider you can still see the site at:

http://www.greenspeedmagazine.com/fusion/files/news.php

Thanks!

Jeremy says:
August 26, 2009 at 12:13 AM
ok fixed it, now I just need help fixing my slider. can someone look at my code and tell me what Im doing wrong?

thanks!

webdeveloperplus says:
August 26, 2009 at 5:49 AM
Jeremy, you haven’t put the code at right place, You need to add provided JavaScript code into the <head> tag of your page. See the demo http://demo.webdeveloperplus.com/featured-content-slider/ and check its source code

Jeremy says:
August 26, 2009 at 9:48 PM
ok I tried moving the code into the head tag like in the example but it still isnt working. It wont cycle through or change the main picture when you click on a category.

Any more suggestions? Is my code still in the wrong place? I apologize for all the questions, but Im extremely new with all this.

Thanks!

Vernon says:
August 26, 2009 at 7:31 PM
This is a great tutorial and I thought I could add to it a bit in these comments. I saw some visitors had asked about pausing on hover. It’s actually quite simple:

$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”,0,true);
},
function() {
$(“#featured”).tabs(“rotate”,5000,true);
}
);
});

Uri Grinwald says:
September 11, 2009 at 6:38 PM
Hey Vernon,

Thanks for posting a solution to this question. Didn’t think there would be a response until now.
Great work!

Vernon says:
October 7, 2009 at 1:24 AM
Thanks! Sorry for the late reply, but I just came back here again as I’m including this tutorial in a run down of tools and plug-ins to use when building a site around jQuery. Neat to see my solution added to the article. Sweet!

Jeremy says:
August 31, 2009 at 3:39 AM
Any suggestions at all? Im willing to try anything. It wants to work, because when there is a problem with the code and the page displays wrong, eg the four pictures are all visible and displayed in a column down the page the pictures will flash and go through in order. so it wants to work, but for some reason I cant figure out, it wont.

like I said im willing to try anything at this point.

Thanks!

Siv says:
September 1, 2009 at 2:15 PM
Hey, Implimenteed this worked fine except for the text that is supposed to appear over the picture!?
it just goes down the bottom of the slider outside the border for some reason “S

btw thanks

ivanichi says:
September 4, 2009 at 4:18 AM
try this script..after

ivanichi says:
September 4, 2009 at 3:39 AM
thanks. but, how to make featured function can be better for more image ?? i’am agree with siv it just goes down the bottom of the slider outside the border…..

ivanichi says:
September 4, 2009 at 4:11 AM
hehe, i have solution for it after post….
hi, siv…and nano… you can try div style = overflow, after ul class ui-tabs-nav for create scroll on your small image, its work for me

Joe says:
September 6, 2009 at 7:57 PM
Very nice!
Is it possible to crossfade the slides instead of all fading from white?

Filme noi says:
September 10, 2009 at 11:57 PM
Hi there ,
I want to ask you …. how can i make this work in wordpress ? is there a way to implement this or a plugin something ???
Thanks allot !

AnubisibunA says:
September 12, 2009 at 2:55 AM
Another way to change on hover is

$(function() {
$(“#tabs”).tabs({
event: ‘mouseover’
});
});

[ from : http://www.jqueryui.com/demos/tabs/#mouseover ]

Kirsten says:
September 12, 2009 at 4:51 AM
Hi, I’m not sure if you can help me with this, but I really enjoy this slider and can’t get it to function properly on my site…

I’ve got it working here: http://lifewater.org/modx/assets/images/home-content/

But I cannot get it to work once I “plug” it into my actual site with content…..
http://lifewater.org/modx/

Do you have any ideas of what could be happening? I’m pretty sure I copied and pasted the same code…

jeremy says:
September 13, 2009 at 3:48 AM
It looks like it was working on your site, but not the first one. I had a problem with mine too when I would put it in my header. Im not sure how to explain this on here, but try putting the code for the content-slider outside of the rest of your code, like at the bottom of the page after everything else has been closed. then you can get it to show up where you want by editing its location in the css. does that make sense?

also is this your charity? i have whats called a charity of the month panel on my site where we sponsor a new charity every month and visitors can donate. I’d love to help with this charity and sponsor it for a month. 100% of the proceeds go to the chairty (unless there are some processing fees like mailing the check or something like that)

http://www.greenspeedmagazine.com/fusion/files is the site for now. Its a LONG way from finished, but when it is id love to work something out. let me know.

Kirsten says:
September 15, 2009 at 3:19 AM
Hi thank you,
I tried placing this part of the code:
[code]

$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 3500, true);
});

[/code]

in various places and here is what I’m finding that it does open and work in Safari and a few browsers, but it does not work on a mac Firefox, but does work on a PC firefox.

And the links turn to something like this: http://lifewater.org/modx/#fragment-2
Rather than going to the other content where Safari says “Go to #fragment-2 on this page”…. So, it is something with the code in relation to Firefox.

Any ideas?

And yes it is a charity I work for and I’d love to post it once this site is done. The old site is old…

Kirsten says:
September 15, 2009 at 9:52 PM
It worked! Thanks I put it at the very bottom of the code and it worked.

Rick says:
September 15, 2009 at 11:57 PM
Hi there, congrats and thanks on this awesome solution! It works really well and will be visible in a new non-profit project of ours. Right now an image exits and a new image fades in. Would it be possible to have them fade over? This way there’s always an image.

Any help would be appreciated, I can’t seem to find my coding skills.. 😉

Regards Rick

Jonathan Lyon says:
September 16, 2009 at 1:19 AM
Absolutely awesome – looks great just what I need – I will try it out this week.

Thanks

Jonathan

Andy Gosling says:
September 16, 2009 at 2:22 PM
Many thanks for creating and sharing this – just what I was looking for.

I’ve added Vernon’s ‘Pausing Slideshow on Hover’ code which I’ve encountered a problem with. All works fine until I click a tab to view a different ‘fragment’, after which the ‘pause on hover’ no longer works. Wondered if anyone else has encountered this and if there is a fix?

Thanks again,

Andy

Jonathan Lyon says:
September 26, 2009 at 8:25 PM
Hi Andy

I have the same issue adding the pause on hover code snippet – if you try clicking a few thumbnails and try and hover the transitions become really erratic.

We need a new pause on hover solution – anyone have any ideas or can fix Vernon’s solution?

Thanks

Jonathan

Vince says:
October 10, 2009 at 2:20 AM
I was having the same problems of erratic jumping after the hover. I upgraded the UI to 1.7.2 and that seems to have corrected the issue.

Uri Grinwald says:
September 16, 2009 at 7:27 PM
Hi there,
Is there a way to have this work in a random order making sure not to repeat itself consecutively?
What about changing order of start item?

Thanks

Kirsten says:
September 17, 2009 at 1:48 AM
Is there any way of slowing down the fade?

Not the timing, but the actual fade itself…

Thanks! This is great!

aljuk says:
September 18, 2009 at 7:39 PM
Many thanks for this, it’s very useful, and all working great.

3 points / questions:
1. It loads up with div fragment 4 selected, not div fragment 1. Any idea why?
2. Would you be able to advise how to cross-fade the images, rather than fade to white?
3. I’d like the info box to slide in dynamically, rather than just be there statically when each fragment fades in. Could you possible advise me how to achieve that?

I’m new to jquery, but this has certainly whetted my apettite. Thanks for that.

One further point which may help those who are not managing to get things working with the ui version 1.7.2 – when I copied and pasted the code from this page, the speech marks which came with it were curly, and should be replaced with straight ascii speech marks.

aljuk says:
September 18, 2009 at 7:59 PM
further to my previous comment (1) about fragment 4 loading first, that was my bad – it’s actually working fine (I was reloading an incorrect url).

strony internetowe says:
September 19, 2009 at 4:03 AM
Nice script. I like it! Thx.

mike says:
September 19, 2009 at 11:09 AM
This was very helpful, have been searching for a way to get rotate to work in 1.7.2 ui. Thank you very much. Very cool tutorial.

Jaspal Singh says:
September 20, 2009 at 9:53 AM
Excellent use of jquery. this example is exactly what I want to have on my website. Thanks for sharing.

selva says:
September 21, 2009 at 2:46 PM
Thanks very useful info……

Balou says:
September 29, 2009 at 11:41 PM
Hi, this is a nice tut:)

But i need help 🙂 How can I implement it for WordPress recent posts? I want to show the 5 latest post in this slider,but I can’t figure out how to do this…:(

Khawar says:
September 30, 2009 at 5:14 PM
Hi, Really nice one.

is it possible that it also works on hover, when someone mouseover on the li , become visible in tabs panel.. ??

Kirsten says:
October 1, 2009 at 5:03 AM
Is it possible to make the tabs on the right to be actual links? As in, they go to a different page?

When I tried to do that, it messed up the styling of it all…

Thanks!

Jeremy says:
October 2, 2009 at 5:07 AM
Has anyone figured out how to make it pause on click instead of hover?

FMF – Akdeniz Atesi says:
October 3, 2009 at 5:17 PM
This is the best slide script, works great and adapted very easily

Karavan, Kamp, says:
October 3, 2009 at 5:21 PM
Best script on the web. thanks

amarshukla123 says:
October 5, 2009 at 7:45 PM
Gr8 tutorial,
I am stucked in a situation where I am passing Featured Content Structure , i.e div using AJAX.I am using livequery plugin of jquery.But its not working.Can u help regarding this?Any suggestion?
I am using like this –
$(“#tab2″).livequery(‘click’, function(event) {

$(“#txt”).load(“portfolio.txt”);
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);

});
on click of tab2 I am loading” Featured Content Structure” in txt DIV.portfolio.txt file contains “Featured Content Structure”. Where am I wrong?

vnjporg says:
October 6, 2009 at 11:11 AM
Hello
Good script but I am using jootheme and it has a ajax menu. The following line conflicts with my menu

When I add this line to my header, my menu stop working and i get an java script error .
Could you please tell me how to solve this
Thanks

Oliver Gibson says:
October 6, 2009 at 7:54 PM
Hi there, really great script thanks, managed to integrate it into our website well, very quickly with your clear instructions. Love it! Was about to ask you a few issues, but with the help of Google i’ve managed to sort them out 🙂 One more time, thanks alot for your hard work! Let’s us people get on with the millions of things we gotta do!

Bartolo says:
October 7, 2009 at 9:26 PM
Hi there,

as others said – superb slider, thank you very much for sharing your code. I tested it many times and it works perfect. It’s pretty easy to adapt but I have a problem with something that I can’t solve. 🙁
Hope you will be able to show me the answer 🙂

Anyway I would like to use it as menu that shows some text (on click), the problem is that each menu item is a graphic with another graphic for a hover and selected. Everything works great except one thing, I can set only one and the same graphic for selected menu item. How to add different selected graphic to each item?
I’m looking forward any help, thanks in advance!

NICKD says:
October 10, 2009 at 9:11 PM
Quick question. I got the script and customized it. This is honestly a great script and easy to use. I was wondering if we could add another element to it and how would I go about doing it. I was wondering if we could add a “Hide and Show” effect to the transparent background where the text shows inside the actual image so we are able to see the image in full without any text on it.

Shahriar Hyder says:
October 12, 2009 at 10:57 AM
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:

Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance

Mat says:
October 13, 2009 at 2:03 AM
I am getting an issue with IE…
The tab are not “rotating” and nothing happends when I am clicking on the ling to change tab… I don’t have any issue using Chrome or Firefox…
If you have any help to provide, that would be erally helpfull.
Thanks a lot.
Mat

Mustafa Balaban says:
October 17, 2009 at 7:53 PM
good job! =)

Nikesh ponnen says:
October 19, 2009 at 4:14 PM
i am gettingsome problem with ie

http://revelomax.blogspot.com/

Gie says:
October 20, 2009 at 12:28 PM
I will implement this to my web project…, thanks a alot..

Ben Green says:
October 21, 2009 at 3:26 PM
Hi all, can someone let em know how to get two of those working on the same page? I have created a whole new HTML section, with the ID featured2, and created all the CSS for this, I have then changed the call to this, but the second one still doesnt play:
$(document).ready(function(){
$(“#featured > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured2 > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
});

gkiller says:
October 21, 2009 at 9:21 PM
Really great tutorial. The only issues I am having are the following:

1. Our jQuery accordion navigation menu now has a slow jerky animation when opening/closing. Is there a way to resolve this?

2. Our primary top level navigation drop-down menus (also jQuery) fall behind the news slider. Is there a way to make the drop down menus open on top of the slider?

Thanks

TransDisplay says:
October 24, 2009 at 3:43 PM
Nice tutorial mate, i’ll try that to create a nice addons

Thanks

Andrew says:
October 27, 2009 at 1:50 PM
Advice to get the PAUSE on HOVER to work.

Insert Vernon’s code:
$(document).ready(function(){
$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);
$(“#featured”).hover(
function() {
$(“#featured”).tabs(“rotate”,0,true);
},
function() {
$(“#featured”).tabs(“rotate”,5000,true);
}
);
});

Below the HTML of the slider.

Andrew says:
October 27, 2009 at 2:03 PM
This above does work, but once you click a tab it does not pause again.

What I did was wrap the “fragment” divs with a new div (#tabspanel) then assign it the CSS of “#featured .ui-tabs-panel”

I then changed this:
$(”#featured”).hover(

to this:
$(”#tabspanel”).hover(

Works perfectly! It only pauses when your mouse is over the Fragment blocks.

gkiller says:
October 28, 2009 at 7:42 PM
In Internet Explorer, the slider causes one of our accordion menus to slow down and have jerky movement when it is opened-closed. We also have a drop down menu that falls behind the slider causing it not to be viewable. We adjusted the z-index and for our menu, but the same behavior results.

None of the slowness occurs in Firefox or Safari…of course.

Any thoughts on this?

Thanks

mp says:
October 29, 2009 at 12:30 PM
What about adding a function to stop the rotation onMouseClick?

Comments are closed for this post.

« Previous Post
10 Incredibly Useful WordPress 2.8 TutorialsNext Post »
AJAX Multiple File Upload Form Using jQuery
Subscribe:Subscribe to RSS Feed
Subscribe to RSS
Subscribe to email updates
Follow on Twitter
Sponsors
Recent Articles
40 Fresh & Beautiful Examples of Websites With Large Backgrounds
Quick & Easy Way to Implement Drag n Share With jQuery
Tips to Write Better CSS Code
12 Lesser Known But Useful WordPress Hacks
25 Amazing & Free Flash Based Image Galleries
15 Ways to Improve CSS Techniques Using jQuery
AJAX User Poll Using jQuery and PHP
25 New & Useful PHP Techniques & Tutorials
13+ Fresh and High Quality Texture Sets & Collections
15 Time Saving CSS Tools You Should Be Aware Of
Popular Articles
12 Lesser Known But Useful WordPress Hacks12 Lesser Known But Useful WordPress Hacks

Oct 30, 2009 – 21 Comments »

15 Ways to Improve CSS Techniques Using jQuery15 Ways to Improve CSS Techniques Using jQuery

Oct 20, 2009 – 25 Comments »

25 New & Useful PHP Techniques & Tutorials25 New & Useful PHP Techniques & Tutorials

Oct 13, 2009 – 30 Comments »

21 Brilliant jQuery Image Gallery/Slideshow Plugins21 Brilliant jQuery Image Gallery/Slideshow Plugins

Sep 14, 2009 – 17 Comments »

25 Incredibly Useful CSS Tricks You Should Know25 Incredibly Useful CSS Tricks You Should Know

Sep 01, 2009 – 71 Comments »

30+ Fresh & Amazing jQuery Plugins & Tutorials30+ Fresh & Amazing jQuery Plugins & Tutorials

Aug 19, 2009 – 7 Comments »

Cool Stuff (from around the web)
50 Fresh and Free WordPress 3 Series Compatible Themes

10 Important jQuery Selectbox/DropDown Plugins

15 Powerful jQuery Tips and Tricks for Developers

20 New Examples of Minimal Websites

Building Tabbed Navigation using SpryTabbedPanels

How to Create a Basic WordPress Theme with Gantry Framework

15 Fresh jQuery Menu Plugins and Tutorials