Create A Tabbed Content Rotator Using jQuery

Today we are going to create a tabbed content rotator (not sure what to call it really) using everyone’s favorite Javascript framework, jQuery and an interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.

jQuery UI 1.6 Book

jQuery UI 1.6 – The User Interface Library for jQuery

Javascript is not really my cup of tea that’s why I use jQuery, a framework for easily interacting with Javascript. jQuery UI is a library built on top of jQuery which allows you to create interactions, full-featured widgets and animation effects. jQuery UI 1.6: The User Interface Library for jQuery, written by Dan Wellman, is a book that will give you a good foundation in learning jQuery UI.

jQuery UI 1.6: The User Interface Library for jQuery has in-depth explanations on each component; building from its default basic state into a more advanced state. Additionally, the book also looks at how components can be used in real world scenarios. This book is aimed at user interface designers and developers who need to learn how to implement jQuery UI quickly.

I also have a tutorial on coding up a professional menu in case rotating content with tabs is not your thing. You can view a working demo of this tutorial in case you’re curious and feel free to download the source files for reference.

Let us begin.

Build A Solid Structure – XHTML

We have our usual wrapper that wraps the rotator div which contains the tabs structured as a list and the content fragments that we’re going to rotate. We also reference jQuery and jQuery UI in the head section. The key point here are the class names ui-tabs-selected and ui-tabs-hide for the list and content fragments. Those class names are part responsible for rotating our content.

Updated: We just called ui.core.js and ui.tabs.js instead of using a customized code. Please check out the updates. Hope most of you will be able to use this one. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">

<title>Tabbed Content Rotator Using JQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script src="" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>

<div id="wrapper">
	<div id="rotator">
		<!-- Tabs -->
	    <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Maximize Profits</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Flexible Technology</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Practical Solutions</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Customer Support</span></a></li>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
	        <h2>Maximize Profits</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Flexible Technology</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Practical Solutions</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Customer Support</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	</div><!-- end rotator -->
</div><!-- end wrapper -->

Wrapper and Rotator Styles

After establishing our structure, we now design our rotator with some CSS. Assign a width and a couple of borders to our wrapper then center it. We then make some room for the tabs by adding a bottom padding to our rotator div.

/* Rotator Styles */
#wrapper {
	border-top:3px solid #92a5bc;
	border-bottom:1px solid #92a5bc;
	margin:0 auto;

#rotator {

Tab Styles

Basically we position the tabs below the content fragments and we display them horizontally. You’re also going to notice that we stacked up a few selectors (the list and the elements inside it) because each of them will share the same properties and values and we always strive to write optimized CSS.

/* Tabs */
ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
	font-family:Arial, Helvetica, sans-serif;

ul.ui-tabs-nav {
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom right;
	border-top:1px solid #FFF;

Non-Selected Tab Styles

Assign our tabs some font and border styles. We also tile the same background image from the ul.ui-tabs-nav

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom left;
	border-left:1px solid #FFF;
	border-right:1px solid #c5ced9;

Hovered Tab Styles

We give our tabs some padding and give the hover state a background graphic.

/* Hovered Tab */
#rotator .ui-tabs-nav-item a:hover,
#rotator .ui-tabs-nav-item a:active {
	background:#FFF url(images/uiactivetabbg.gif) repeat-x bottom left;

#rotator .ui-tabs-nav-item a span {

Active Tab Styles

We give all of the link states the same hover background graphic. Basically you can customize this graphic according to your design needs.

/* Active Tab */
#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
	background:#fff url(images/uiactivetabbg.gif) repeat-x bottom left;

Content Panel Styles

Now we’re going to style the content panel. This is the section that holds the content that is being rotated. The key point here is the padding which we’re going to use to enclose the text content and make some room for the background graphic associated with each rotated content. Then we use a class to hide the other panels.

/* Content Panels */
#rotator .ui-tabs-panel {
	font-family:Arial, Helvetica, sans-serif;
	padding:40px 540px 15px 15px;

#rotator .ui-tabs-hide {

Content Styles

We’re just going to style our header, paragraph and links inside the content panel.

#rotator h2 {

#rotator p {
	margin:.5em 0;

#rotator .btn_get_started {
	background:transparent url(images/getstarted.gif) no-repeat

#rotator .btn_learn_more {

Background Images

Now we’re going to apply the background images. The first 2 panels have the images to the right part of the panel so we need to position the graphic to the right. Then we’re going to position the images to the left for the other 2 panels. Also take note that we need to set a new padding to make some room for the images that are positioned to the left. And that’s it for the CSS.

/* Background Images */
#rotator #fragment-1 {
	background:transparent url(images/coins.jpg) no-repeat top right;

#rotator #fragment-2 {
	background:transparent url(images/bearings.jpg) no-repeat top right;

#rotator #fragment-3 {
	background:transparent url(images/map.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;

#rotator #fragment-4 {
	background:transparent url(images/support.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;

Making the Contents Rotate

Now it’s time for some jQuery magic! If you’ll notice at the beginning when we first built our structure, we referenced two Javascript files in the head section. First reference is for jQuery and the second is for jQuery UI.

To make our content rotate we just need to invoke the function to rotate our tabs that is included in jQuery UI library. You just need to point the tabs function to the section where it holds the links, in this case we enter #rotator > ul inside our function.

<script type="text/javascript">	
		$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);

Voila! We are Done!

Content rotators are one of the neat ways you can showcase your products and services without taking up too much screen real estate. After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.

I hope you will find this tutorial helpful. If you have any questions or comments please feel free to let me know. Until then, see you next week and have fun!

118 thoughts on “Create A Tabbed Content Rotator Using jQuery

  1. Thanks a lot this is the shizzle! I am fairly new to jQuery this is a huge help, great tutorial!
    ~ Jim
    ~ Jacksonville, FL

  2. Superb work Ray, beautifully written and great tutorial. I was wondering if it is possible to “turn off” the rotator – other than to increase the delay to near-infinity?. Keep up the great work!

  3. You can stop the rotation upon clicking by removing the “true” parameter when you initialize the plugin.

    $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true);

    $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);

    Further documentation:

  4. Nice effect, but apparent flaw in that JQuery UI is a really common plugin that could be potentially used to create any number of effects on a page. By creating and packing a custom version of JQUERY.UI there is limited opportunity to use the full range of features associated with this library.

    It would be nice to see this plug-in working using standard UI/Tab libraries otherwise it is just too limited to apply within any JQuery-UI site.

  5. Hi – I implemented this on a section of the webpage that is about 500px down the page… so you have to scroll down slightly to see all of the content rotating.

    It works great EXCEPT…
    When the content rotates, the page jumps back to the top of the page. I am guessing this is because of the #fragment-1 #fragment-2 etc in the anchor tags of the tabs, and can anyone suggest a workaround? Other than that, working nicely.
    ~ Jim
    ~ Jacksonville, FL

  6. Hi Jim S,

    Good observation. I can see what you’re experiencing. I’m not really sure though what causes this but I’ll try to come up with a workaround. Thank you for pointing this out.

  7. Thanks Raymond. I think it is the hash in the anchor tag of the tabs behaving like a…

    -anchortagEQUALS#> Back To Top </anchortag-

    … kind of thing – kind of hacked that up to get it to appear in this post.
    Thanks a lot!
    ~ Jim

  8. Hi Andy,

    Haven’t checked the rotator yet in IE8. I was hoping it would work okay in IE8 because it looked somewhat good in IE7. I wonder if someone experiences the same. I’ll try to check it out. Thanks

  9. Hi mate!
    You done a great job but I think that using your own library will cause many people (me for sure) to not use your good work.

    Can’t you release it using standard libraries?

  10. Hi Marco,

    I’ve just updated the tutorial to use the standard libraries of jQuery UI. The truth is the previous code was not my own library. Javascript is not really my cup of tea so I’m very thankful there’s jQuery. I hope you can use the tutorial now.

    Thank you for asking nicely. 🙂

  11. Thanks again for the new code. Wanted to share the css fix I found. I was having IE problems and traced it back to position: relative in the rotator div. It could have something to do with all of the other things I changed in the css, but I just wanted to share in case anyone was having the same problem. I removed position: relative and it works fine in ie now. 🙂

  12. This is really useful – thanks so much!

    Quick question. Can this content be rotated without the tabs visible? I’d like to use it to simply rotate a few content div’s. Thanks for any help.

  13. Hi GeoffL,

    That’s a good question. Yeah, actually you can remove the unordered list that holds the tabs and just have it rotate. I did the same thing in my homepage but I used loopedslider. Good luck!

  14. Well, I spoke too soon. When I remove the unordered list from the code, there is no rotation, only the first appears. Strange.

  15. You’re right! hahaha. I tried to remove the tabs using Firebug and I thought it’s going to work. Apparently it didn’t. hehehe. A quick workaround you can do is to add display:none; for the unordered list ul.ui-tabs-nav. Good luck again.

  16. Works well now, thanks! I’m using this in a very simple way for the site I’m working on now, but I think it may help with other projects as well in the typical (tabs included) way! So thank you!

  17. hey just wondering if anyboby figured out how to fix the issue with this in ie8, just doesnt work for me, its great but i need it to work in explorer hope somebody can help! thanks

  18. Hi Simon,

    I checked out the rotator in IE8 and it’s working like a charm. What problems are you having? Maybe you missed out something. Try checking whether you’re calling the Javascript. Good luck.

  19. Hi Simon,

    I was having a problem in IE8 initially. In the CSS, I removed relative positioning from the rotator div and that fixed everything.

  20. Es igual que el jqueryTab e incluso este es mas rapido de implementar. The JqueryTab is more easier than this script.

  21. I was wondering if anyone fixed the return to top of page on tab switch issue? I’m dying to use this but am unable while it’s misbehaving so.


  22. Hi Raymond,
    thanks for a wonderful tutorial. I had one question though. Is it possible to have the tab to also activate a new page instead of just going to the rotator? i.e. I’m trying to replace the navigation bar with the rotator element.

    I appreciate any help you can offer w/ achieving this effect.

  23. Hi, Raymond!
    Great tutorial and real nice styled slider, highly appreciated! Two questions, please:
    First: If Javascript is turned off, it has got a real funny behavior, when links in the nav are clicked several times (try). Normally, the divs are displayed in a row, one under another. What would I have to change so anyone who´s got JS turned off can see all the divs anyway (or every single when clicking a link)?
    Second: Is it allowed to use this for commercial projects, too?
    Thanks a lot!

  24. @Lucas: I can’t remember fixing this but I’ve added dummy content in the demo page to show you that the rotator is already behaving in accordance with your requirements. Good luck.

    @dmitry: I think it’s possible but I’m not really sure what you’re looking for. I would suggest that you try out a different approach for what you want to do.

    @SiGa: Having JS turned off is one weakness of this rotator. Try this instead
    For commercial projects you have to send me $20 for the license… JOKE!!! hahaha :-p. You can use this for any projects you have as long as you give me your soul. hehehe. Good luck.

  25. Thanks, Raymond, for your reply and for pointing me to Jenna´s tutorial (I obviously forgot about that one)! I´ve also got Luca´s problem – could it depend on the layout maybe? I´ll have to try a variation to find out…
    By the way: Where´s the Paypal-button?? hahaha… 😉 Want to keep my soul! :-p

  26. This is an automatic traduction (sorry for my english)
    With respect to the exposition (approach) of @Siga for working without javascript, I did the following thing:
    1.-introduce all the div “fragment” (, , y ) together in a div which i called div = “contenedor” and with css I gave it the following characteristics:

    #contenedor {
    overflow: hidden;/*SO THAT WORK WITHOUT JAVASCRIPT */
    2.- I eliminated the class “ui-tabs-hide” (NOT THE CLASS “ul.ui-tabs-nav”) of the div “fragment-2″,”fragment-3″ y “fragment-4″ (only i eliminated the class to the divs but didnt touch the css)
    3.-i Moved the menu () complete at the end of the divs “fragments” (but inside the div “rotator”)
    4.-I removed in the css “ul.ui-tabs-nav” the absolute position and I used float:left;

    ul.ui-tabs-nav {
    float:left;/* take off position:absolute;*/
    background:#FFF url(images/uitabsbg.gif) repeat-x bottom right;
    border-top:1px solid #FFF;
    I hope it works, only i probed in firefox
    I am sure that there are better alternatives, since I am not an expert in javascript not even in jquery, but i felt obligatted to comment my solution

    sorry for my english

  27. is very cool, but, i need your help!
    i need to add 2 arrows for left (previous) and right (next)
    is it possible?

    thank’s! and sorry for my english :S

  28. Almost the script I was looking for. Well done. The only thing i miss is this. By hover a listitem the content get displayed. Do you think this is possible with this script, because you you the link to send something to the url?

    Or someone knows a script working like that?

    But still.. good job!

  29. Hi

    love the script. just having an issue with what appears to be a jquery plugin conficts.

    the script runs fine on the site , except for pages that are also running sIFR.
    if i remove the calls to the sIFR files the flipper works again.
    Unfortunatly my client values the custom fonts over the content flipper, but id like to look for a solution first before giving up all hope and bowing down to Corporatocracy.

    just wondering if anyone else has come across this problem as well, and has a solution?

  30. Great rotator, but I am reproducing the “jumps to top of page” issue.

    Oddly enough, with as much dummy content as has been added in the demonstration, the issue does not exhibit itself, but when there is just enough dummy content to have the entire page be slightly over a full screen high… the issue reappears.

  31. Very nice indeed. Almost perfect, except for the “jump to the top” issue mentioned by Jim S. and Lucas. Anyone figured out a workaround yet? I’ve been banging my head against the wall trying to troubleshoot that issue, but no luck yet. It would appear the dummy text only prevents the page from jumping back to the top if you use a lot of it, such as in the demo (12 paragraphs of dummy text). But if you have just a little dummy text (i.e., 1 paragraph), the issue arises once again. Would love to use this but until I figure out how to prevent the page from jumping to the top, I’m afraid I can’t. With that said, it is a very lovely script.

  32. Hi….

    I found a simple workaround for the “jump to the top” issue.
    I placed the entire div(wrapper) corresponding to the rotator inside a table’s td tag and automatically the issue got settled…..

  33. Hi

    Very good example!

    Just two problems :
    1. when you click too fast, it can mess the images order
    2. when I used ui-core+ui-tabs+jquery-1.3.2.min.js it didn’t work, only when I use the 1.7.2 ui js+1.3.2..


  34. hi
    great thanks!
    i need to stop the tab rotation after mouse selected a tab or hover over it. then if the mouse leaves the tab
    rotation should start. i used your suggestion as
    “You can stop the rotation upon clicking by removing the “true” parameter when you initialize the plugin.
    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 4000, true);
    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 4000);” ”
    it stops the rotaion after mouse click. but does not start again after mouse leaves the tab.
    how do i fix it?

  35. Hi Raymond,

    Thanks for such a cool script.

    I’d switched off the tabs and I’d like the rotation to stop when I either mouse in to the rotation area or click in the rotation area. I tried the code below but it did’nt work. The rotation just continues.

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

    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 4000);

    Any ideas how to acheive this?
    Thanks in advance

  36. Hello

    quick question, and hopefully a easy solution

    My Client is using (and dependant on) jQuery 1.2.6 and would like to use this content flipper.
    we have managed to get it implimented fine on the site ,however the onstates (that is the class changes on the li’s ) are not working.

    bearing in mind that we cannot upgrade to 1.3.2 .. is there any solution for this issue?

  37. You can also make it slide and fade or just one or the other. Use the fx property height. That will make the image slide up and fade at the same time.

    # $(document).ready(function(){
    # $(“#rotator”).tabs({fx:{height:”toggle”,opacity: “toggle”}}).tabs(“rotate”, 4000);
    # });

  38. hey there, nice tool, but if the slide / fade is done, the page is jump to the top on every effect, its maybe just a bug.

    happy new year at all

    greez tom

  39. I would love to see this with image replacement-based navigation. I’m trying to incorporate images in my nav rather than text (I have that working in every concievable browser except IE6/7.. But great tutorial. It helped a lot!

  40. I love this tutorial. Everything makes sense. I’m trying to add additional jquery stuff to my page, but when i download a new jquery ui file then this rotator breaks. Even if I download the full jquery ui. So something must have changed. I would love to know why it won’t work. Right now i’m stuck with this rotator with no new jquery.

  41. I found another website with this same info but a little dated. Rather than calling ui.core.js and ui.tabs.js it provided the code (jquery-ui-personalized-1.5.3.packed.js). I tried to load your example but could not get the rotation to work until I switched from calling the ui.core and tabs to the customized code. If you have a moment to reply, what’s the missing connection? TIA!

  42. Hi Raymond Selda,

    Thanks alot for this tutorial. I had one question though,

    Assume I want to make multiple “active” background image for each , could you tell us how can I make it ?

    Maximize Profits –> active background : blue
    Flexible Technology –> active background: red
    Practical Solutions –> active background: black
    Customer Support –> active background: green


  43. YO Mr.Raed,

    You would just use CSS on the container div that holds that specific cell/block. e.g.

    # #rotator #fragment-1 {
    # background:transparent url(images/coins.jpg) no-repeat top rightright;
    # background-color:blue;
    # }
    # #rotator #fragment-2 {
    # background:transparent url(images/bearings.jpg) no-repeat top rightright;
    # background-color:red;
    # }
    etc.. In fact, you can do anything with CSS to each individual block independently,
    or make one rule for all of the blocks .e.g.

    # #rotator {background-color:#ccc;}

  44. To Lokin Crook

    thanks for your replay

    I think you didn’t catch what I meant.

    I was talking about this css ..

    #rotator #fragment-1 .ui-tabs-selected a:link,
    #rotator #fragment-1 .ui-tabs-selected a:visited,
    #rotator #fragment-1 .ui-tabs-selected a:hover,
    #rotator #fragment-1 .ui-tabs-selected a:active {
    background:red; color:#333;

    #rotator #fragment-2 .ui-tabs-selected a:link,
    #rotator #fragment-2 .ui-tabs-selected a:visited,
    #rotator #fragment-2 .ui-tabs-selected a:hover,
    #rotator #fragment-2 .ui-tabs-selected a:active {
    background:blue; color:#333;

    how can I make differnet colors for each element..

    the above css doesn’t work with me.

  45. Mr Raed.

    Your CSS failed as it seems you have two different sections referenced that are not part of the same block / section: the class.ui-tabs-selected is not a child of #fragment-1. Therefore nothing happens when you say under rotator under fragment-1 target .ui-tabs-selected. Let say you have a car and a house, you cant really say, under the car find basement cause the basement is under the house.

    #rotator #fragment-1 .ui-tabs-selected

    So then we would need to decide if we want to target the link in the tabs block or the links in the changing fragment blocks or both.

    If you want to target the links inside the changing fragment divs, you could use:
    #rotator #fragment-1 a:link {background:red; color:#333;}
    #rotator #fragment-2 a:link {background:blue; color:#333;}

    if you want to target links inside tab section not changing, you could use:
    #rotator ul.ui-tabs-nav li a:link{background-color:blue;}

    if you want to target only current selected anchor from tabs section during a cycle:
    #rotator li.ui-tabs-selected a:link{;background-color:blue;}


  46. I’m experiencing a problem when I double click one of the ‘tabs’. Two pictures will be visible at the same time for a split second and then the picture that is suppose to display will be in its normal spot. The rotator functions properly it’s just the javaScript switching the pictures can be delayed and both pictures will be visible.

    I tried a few different things to get this working, for example I tried to place a small pause after clicking once on a tab. But I believe I just don’t know enough about how the code works to get this effect working. Not sure if there is a better solution but would someone be able to help me figure this out?

    BTW, this rotator is excellent. Perfect for Ipad/no flash installed browsers. It’s the best alternative to date in serving up animated content. Thank you so much!

  47. I’m fairly new to all of this, could you tell me if it is possible to have the tabs sit to the right of the rotator as opposed to the left? When I try to change float from left to right in the CSS, the outcome is not pretty!

  48. I’m encountering a strange problem when I scroll down. When switching slides the pages goes up again to the location of the slider. Anyone knows a fix or what might be causing this?


  49. Repost, hopefully someone out there knows the answer 🙂

    I’m experiencing a problem when I double click one of the ‘tabs’. Two pictures will be visible at the same time for a split second and then the picture that is suppose to display will be in its normal spot. The rotator functions properly it’s just the javaScript switching the pictures can be delayed and both pictures will be visible.

    I tried a few different things to get this working, for example I tried to place a small pause after clicking once on a tab. But I believe I just don’t know enough about how the code works to get this effect working. Not sure if there is a better solution but would someone be able to help me figure this out?

    BTW, this rotator is excellent. Perfect for Ipad/no flash installed browsers. It’s the best alternative to date in serving up animated content. Thank you so much!

  50. Hi there guys,

    I have successfully integrated the rotator, and I have to say it is exactly what I was looking for.

    One quick question, I have replaced the tabs with images and this has worked fine for the hovered and background styles as I have created new styles for each tab, e.g. li.ui-tabs-nav-item-1 and li.ui-tabs-nav-item-2 etc. The problem is with the selected/active tab, I can’t duplicate the style as it is only called once from the nav-fragment-1 line of code, not the rest.

    I hope that all makes sense and any help would be greatfully received. Thanks in advance.
    Kind regards,


  51. this is almost exactly what i need…

    quick question (sorry i’m new at this)…

    i can’t seem to get the tab styles to sit vertically on the left? i don’t see how in the style, they are positioned horizontally? i was expecting something like display: inline;

    this must be a simple solution… i just can’t figure it out. 🙁


  52. Is there a way to include a pause/start button? I’d like to have it rotate as it normally would but also give the user the ability to “stop” the rotation, and then start it up again. Is this possible?


  53. Hi All,

    Just thought I would shed some light on the issue with the page jumping upwwards when you scroll down the page past the bottom or the rotator.

    The cause is that for the moment of time both tabs are hidden, right between hiding and showing, the overall height of the page becomes smaller which moves the scrollbar up but won’t reset it after tab is shown.

    The solution is to define the total height of your rotator, including tabs and content, in the #rotator class of the CSS. For instance you can see our modified version here which has the height defined as 300px – without this the page would jump when you are further down the page past the rotator section.

    Hope that helps and by all means take a look at my code for more info.
    Kind regards,


    P.S. Thank you again to the creator for this script, it is truly excellent and my sympathy is with you for the huge numbers of comments you get!

  54. what a great script! thank you so much.

    one question. does anyone know if there is any way to stop the rotator on the first frame once it has played once?

    thank you

  55. Great script!!

    Need help.

    I set the tabs to float right, as I wanted the tabs to appear on the right side of the rotator, however, when I do this the tabs scroll from right to left?

    I have tried all kinds of things to get the tabs to still scroll from left to right, whilst having the tabs aligned to the bottom right of the rotator, with no luck.

    Can anyone help with this?

  56. Sorted!

    I added another list item before the first one, and set it to a fixed width to move my other tabs over to the right. Crude, but it works.

  57. i need the same functionality accept the rotator should change on mousehover and the tab should slide up and down. any good ideas are welcome

  58. This script is exactly what I needed – it was super easy to set up and customize for my client’s site. Thanks so much for the tutorial Raymond!

    Just thought I’d mention that I also had the jumping issue at first that has been mentioned a few times in the comments, and defining the height of the #rotator took care of it perfectly.

  59. Hello! Your code is excellent!
    I want to make one small change. Will you help me?
    I want to replace the background image for a youtube video for example … Is it possible?
    How do I remove the fade effect in rotate?

    Thanks a lot: D

  60. Hey people, i’m new with JS but know something about other codes like AS 123 and php.
    Have someone a solution to have this playing just once? so it stops in the final slide?
    Thanks all folks!

  61. Great slider. How can we modify the transitions? I don’t like that fade to white. Anyway to change the color or use a different transition? Or how about speed it up so you can even see it? We have it working great, this is the only think… If we could do something like the Cycle plugin going up, down, left or right that would be great…



  62. i have been used images as a gif(animated) in tabs. its working in firefox, but chorme and ie8/9 seems not well looking good, my problem is if one tab is active means, other tab also running in background, when click the manually it seems meanwhile displayed the gif images. only i have this issues in chorme and ie browsers.

  63. can anyone help how to stop run(gif_image) the inactive tab images. only visible part image movement only show. if use manually it seems to from the visited part of the gif_images(animated).
    my code is
    script call function:

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

    html code






  64. Thanks for that excellent script and it works just perfect.

    I just can’t tweak it to fit my wish,. I read through the replies here and could not find anything that would work. I even used to follow your earlier reply…
    /*Make sure to add it after the fx {}
    Here is the jquery page with that information:*/

    It just appears to be all dead, sorry for my jQuery ignorance but I’d greatly appreciate your help

    What I try to achieve is;
    1. no click on tabs but hover over tabs
    2. still a fading effect on event:’mouseover’

    Thanks you so much

  65. I tires to change it to the following but to no avail
    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs({event: “mouseover”});
    $(“.ui-tabs-panel”).fadeTo(“slow”, 0.3);
    $(this).fadeTo(“slow”, 1.0);
    $(this).fadeTo(“slow”, 0.3);

    not sure what I’m missing… thanks

  66. Very nice script Raymond!

    One issue I have is it seems to rotate faster in Firefox than IE. Any thoughts…sorry if this is a repeat question.

    Thanks again,

  67. a problem have occoured for me.For example when i down of the webpage
    when tab change it make my browser go where the tabs are how can i solve this issue

  68. @Rob
    thank you very much it works now.But it doesnt rotate in some browser like opera and chrome but i am sure somebody would explained it at the comments above now i gotta read all of them down.thanks a lot again

  69. great job, I put it into my site, but I wanna know if I can make it stop on hover. My client want this way and it is a must. if anyone can help me, then i send him many many thanks:)

    ps. I read all the replays, no solution.

Leave a Reply

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