How do I turn my jQuery tabs into a slideshow with active tabs cycling also?

JavaScript
1

I’ve got simple jQuery tabs and wondering if there is a fairly simple way a make the tab content crossfade (or just fade in) while also having the tabs cycle through their active state along with their corresponding content. Here’s my blogsite where I have the current tabs http://www.roscoandroy.com

Here’s the jQuery:

/

/ JavaScript Document
$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content



//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
    });
});

My tabs structure is like this.

<ul class="tabs">
    <li><a href="#tab1">TAB1</a></li>
    <li><a href="#tab2">TAB2</a></li>
    <li><a href="#tab3">TAB3</a></li>
    <li><a href="#tab4">TAB4</a></li>
    <li><a href="#tab5">TAB5</a></li>
    <li><a href="#tab6">TAB6</span></a></li>

</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">tab1 content</div>
    <div id="tab2" class="tab_content">tab2 content</div>
    <div id="tab3" class="tab_content">tab3 content<</div>
    <div id="tab4" class="tab_content">tab4 content<</div>
    <div id="tab5" class="tab_content">tab5 content<</div>
    <div id="tab6" class="tab_content">tab6 content<</div>
    </div> <!--end tab_container -->

THANKS for any help!

2

Not sure if this is what you mean, but once you’ve clicked on a tab, that tab should stay colored red (like when you hover). You can do that by adding this to your style sheet:

ul.tabs li.active a {
  background-image: url(images/fpnav_hov.png);
}
3

Thanks for your response ralph.m! I will add that in.

The other part of what I’d like advice on is how to get the tabs/tab_content to cycle through like a slide show. I don’t know if “cycle” is the right word - maybe “rotate”?

4

I’m not good at modifying these things, so I tend to look for one that’s already set up to do that sort of thing, but it seems the slider you are using has the option to do what you want, so I’d recommend looking through the user notes for advice on how to set the slider to auto scroll:

http://guides.slidervilla.com/pointelle-slider/

Or you could check out another slider like this:

http://demo.webdeveloperplus.com/featured-content-slider/

Here are two others possibly of interest:

http://css-tricks.com/examples/FeaturedContentSlider/

http://www.pikachoose.com/