Question

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 for 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.

Answer 1

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