Slider Does Not Work In The Jquery Tabs

I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2. Here is the full demo of the code on JSFiddle: Demo:

Solution 1:

There are a couple possible approaches to the problem that the slider script can't act on hidden elements--either re-initialize the slider script on each tab click, or use

position: absolute;
left: -999em;

and then

left: auto;

rather than

display: none;

for the tabs.

Solution 2:

You'll need to init your flexslider when visible (on tab change)

I think you can do something like this :

$('#tabvanilla').tabs({
    hide: "heightFade",
    show: "heightFade",
    collapsible: true,
    select: function(event, ui) {
        switch (ui.index) {
            case0:
                // nothing to do since this is selected by default on page loadbreak;
            case1:
                $('#flexslider2').flexslider({
                    animation: "slide",
                    slideshow: true,
                    controlsContainer: ".flex-container2",
                    directionNav: true,
                    controlNav: true
                });
                break;
        }
    }
});

Solution 3:

I want to contribute with another solution that works fine for me. I diving into the code and I use firebug to discover that Andres is right. The problem is because all hiddens

at the beginning has their width setted to 0. When I opened firebug everything works fine, hiddens

take the right width. Well, I do that: I putted this piece of code after the click event and the transition:

fixWidth = $next_slide.css('width'); // I take the width of the new active slide$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab$ul = $flexslide_tab.find('.slides'); // Localize <li> container$lis = $ul.find('li'); // Get all <li> elements$lis.each(function(i,elem) {
    $(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});

I hope it will be useful.

Solution 4:

May be this will be help for you..

Add this script to the first tab content page

$(window).load(function () {
    initFlexSliders();
});


functioninitFlexSliders() {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 100,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "fade",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel",
            start: function (slider) {
                $('body').removeClass('loading');
            }
        });

    $('#carousel-1').flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        itemWidth: 100,
        itemMargin: 5,
        asNavFor: '#slider-1'
    });

    $('#slider-1').flexslider({
        animation: "fade",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: "#carousel-1",
        start: function (slider) {
            $('body').removeClass('loading');
        }
    });
}

for other tabs insert this at the bottom of the content.

initFlexSliders();