Multiple Jquery Sliders on one page

I am using the jquery plugin, slides to power my slider. I want to have 3 sliders on my page, only one showing at all times. I have three buttons which cycle through the sliders. THe following is the html and jquery fo开发者_运维百科r my buttons:

HTML

<ul class="tabs">
            <li><a href="#tab1">Slider 1</a></li>
            <li><a href="#tab2">Slider 2</a></li>
            <li><a href="#tab3">Slider 3</a></li>

        </ul>

JQUERY

 $(".tab_content").hide();
                $("ul.tabs li:first").addClass("active").show(); 
                $(".tab_content:first").show(); 

                $("ul.tabs li").click(function() {

                    $("ul.tabs li").removeClass("active"); 
                    $(this).addClass("active"); 
                    $(".tab_content").slideUp(600);

                    var activeTab = $(this).find("a").attr("href"); 
                    $(activeTab).fadeIn(3500); 
                    return false;
                });

You can view a working demo of the page here: http://vitaminjdesign.com/example/examples/Standard/index.html

As you can see, it works, but not well. The jquery that hides each slider on click works but I feel like there is a much better solution. On page load, all three sliders are loading (two hidden). Is this an OK practice?

Is there a better way to handle three sliders than the way I am using it? Or perhaps you have some tips or tricks to make this a lot cleaner and better transitioning between the slides? Thanks in advance.

Loading content hidden into the page is quite ok as long as its not something that will take forever to load.

But in this case i might consider using one slider and just loading the images inside the slider container area on click http://api.jquery.com/load/ Note that you can load the content from within one document ( shown in jquery api page ) by adding extra elements with id's. Thought im not sure how your slider handles extra containers.

That way i believe you should be able to use one slider and load all the images inside that one without confusing the slider as oppose to loading all the images inside one slider and hiding those.. which should confused most sliders.

Using Jquery's scrollTo led to the solution with the following jquery:

$('#hero-slider ul a.pita').click(function () {

                $('#hero-slider ul a').removeClass('activeSlide');
                $(this).addClass('activeSlide');    
                $('.maskss').scrollTo($(this).attr('rel'), 500);
                return false;       

            });

view it live: http://vitaminjdesign.com/example/examples/Standard/index.html