admin管理员组

文章数量:1313364

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:

/

jQuery Code:

$(document).ready(function() {

    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });

    });

HTML:

<div id="tabvanilla">
    <ul class="tabnav">
      <li><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
    </ul>

    <div id="tab1" class="cf">
      <div id="flexslider1" class="flexslider">

        <ul class="slides">
          <li><img src="" /></li>
          <li><img src="" /></li>
          <li><img src="" /></li>
        </ul>

      </div>
      <div class="flex-container1"></div>

    </div><!-- div#tab1 -->

  <div id="tab2">
       <div id="flexslider2" class="flexslider">
        <ul class="slides">
            <li><img src="" /></li>
            <li><img src="" /></li>
            <li><img src="" /></li>
         </ul>

        <div class="flex-container2"></div>
      </div>

    </div><!-- div#tab2 -->
  </div><!-- div#tabvanilla -->

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:

http://jsfiddle/vH5DT/

jQuery Code:

$(document).ready(function() {

    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "slide",
        slideshow: true,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });

    });

HTML:

<div id="tabvanilla">
    <ul class="tabnav">
      <li><a href="#tab1">Tab1</a></li>
      <li><a href="#tab2">Tab2</a></li>
    </ul>

    <div id="tab1" class="cf">
      <div id="flexslider1" class="flexslider">

        <ul class="slides">
          <li><img src="" /></li>
          <li><img src="" /></li>
          <li><img src="" /></li>
        </ul>

      </div>
      <div class="flex-container1"></div>

    </div><!-- div#tab1 -->

  <div id="tab2">
       <div id="flexslider2" class="flexslider">
        <ul class="slides">
            <li><img src="" /></li>
            <li><img src="" /></li>
            <li><img src="" /></li>
         </ul>

        <div class="flex-container2"></div>
      </div>

    </div><!-- div#tab2 -->
  </div><!-- div#tabvanilla -->
Share Improve this question asked Jan 7, 2013 at 18:49 user1355300user1355300 4,98718 gold badges50 silver badges72 bronze badges 3
  • one of the jquery files is setting the style of your second tab contents "LI" to this: width: 0px; float: left; display: block; that width:0 is "hiding" the contents – Andres Commented Jan 7, 2013 at 19:03
  • @Andres, Yes i think too that hidden property has problem with the slider. Could you please suggest how to I can fix it? – user1355300 Commented Jan 7, 2013 at 19:06
  • Still also looking for an answer – Riskbreaker Commented Aug 13, 2013 at 19:19
Add a ment  | 

4 Answers 4

Reset to default 3

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.

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) {
            case 0:
                // nothing to do since this is selected by default on page load
                break;
            case 1:
                $('#flexslider2').flexslider({
                    animation: "slide",
                    slideshow: true,
                    controlsContainer: ".flex-container2",
                    directionNav: true,
                    controlNav: true
                });
                break;
        }
    }
});

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.

    May be this will be help for you..

    Add this script to the first tab content page

    $(window).load(function () {
        initFlexSliders();
    });
    
    
    function initFlexSliders() {
            $('#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();

    本文标签: javascriptSlider does not work in the jQuery TabsStack Overflow