Multiple Jquery Sliders on one page

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.

perhaps this: http://www.queness.com/post/3669/create-a-custom-content-slider-with-jquery — JCHASE11, Aug 19 '11 at 03:25

Joonas · Answer 1 · 2011-08-19T08:59:57.863

0

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.

edited Aug 19 '11 at 08:59

answered Aug 19 '11 at 08:34

Joonas

7,227
9
40
65

I love the idea of simply replacing the images on click; however I do not think this will work with the pagination. When new images are loaded in, the slides have to re-initialize so the correct number of pagination bullets show. Although I think your solution is a better one, I do not know how to implement it correctly! – JCHASE11 Aug 19 '11 at 17:42
Yes, in this particular slider I'm not sure how the loading could be implemented. A lot of the crucial stuff seem to be be loaded in so that anything basically loaded in after page load doesnt show up as it normally would.. It would need some throughout inspection to see how it works. Also, i couldnt bother to look more into it... – Joonas Aug 19 '11 at 20:58

score 0 · Accepted Answer · edited Apr 01 '13 at 08:41

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~~

Multiple Jquery Sliders on one page

2 Answers2