Slider在jQuery选项卡中不起作用

我想在jQuery选项卡中使用2个jQuery Flexsliders。 选项卡1上的滑块工作正常，但它在选项卡2中不起作用。

以下是JSFiddle代码的完整演示：

演示：

http://jsfiddle.net/vH5DT/

jQuery代码：

$(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：

 
 
 
Tab1
 
Tab2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Answer 1

有两种可能的方法可以解决滑块脚本无法对隐藏元素进行操作的问题 – 在每个选项卡上单击重新初始化滑块脚本，或者使用

 position: absolute; left: -999em; 

然后

 left: auto; 

而不是

 display: none; 

对于标签。

Answer 2

你需要在可见时启动flexslider（在标签更改时）

我想你可以这样做：

 $('#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; } } }); 

Answer 3

我想为另一个对我有用的解决方案做出贡献。 我深入研究代码并使用firebug发现Andres是对的。 问题是因为所有的隐藏

在开始时他们的宽度设置为0.当我打开firebug时，一切正常，hiddens

采取正确的宽度。 好吧，我这样做：我在点击事件和转换后推出了这段代码：

 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 
 container $lis = $ul.find('li'); // Get all 
 elements $lis.each(function(i,elem) { $(this).css('width',fixWidth); // I adjust every 
 width from the new slide }); 

我希望它会有用。

Answer 4

可能这对你有所帮助..

将此脚本添加到第一个选项卡内容页面

 $(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'); } }); } 

对于其他选项卡，请将其插入内容的底部。

  initFlexSliders（）;