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
4 Answers
Reset to default 3There 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
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
版权声明:本文标题:javascript - Slider does not work in the jQuery Tabs - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741937214a2405927.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论