我在创建图库页面时遇到问题。我使用 Bootstrap 作为基础,并能很好地使用它。我研究了各种 slider 和轮播,并选择了 Flexslider2 - 它工作得很好,看起来也很棒,并且作为单个 slider 工作得很好。
但是我现在想使用 4 个 Flexslider,每个选项卡上一个用于图库页面。好的,我可以有 4 页,但只有 1 页看起来会更好。
我对 Javascript 很陌生,但了解 html(但不了解 DOM)。为了简单起见,我下面的示例仅设置了 2 个 Flexslider。
当我的页面触发初始 Flexslider 时,效果很好,但当我切换选项卡时,第二个 Flexslider 不会显示,没有错误,但当我在第二个 Flexslider 初始化时在屏幕上发出警报时,它就会显示。这指向 DOM 问题,但我似乎找不到解决方案。
HTML;
<div class="row-fluid">
<div class="span9">
<section id="tabs">
<div class="bs-docs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>this is tab1 (0)</p>
<section class="slider">
<div id="slider1" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide1.jpg" /> </li>
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
</ul>
</div>
<div id="carousel1" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide1.jpg" /> </li>
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
</ul>
</div>
</section>
</div>
<div class="tab-pane" id="profile">
<p>this is tab2 (1)</p>
<section class="slider">
<div id="slider2" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
<li> <img src="assets/gallery/slide1.jpg" /> </li>
</ul>
</div>
<div id="carousel2" class="flexslider">
<ul class="slides">
<li> <img src="assets/gallery/slide2.jpg" /> </li>
<li> <img src="assets/gallery/slide3.jpg" /> </li>
<li> <img src="assets/gallery/slide4.jpg" /> </li>
<li> <img src="assets/gallery/slide1.jpg" /> </li>
</ul>
</div>
</section>
</div>
</div>
</div>
<hr class="bs-docs-separator">
</section>
</div>
</div>
JavaScript 是;
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault();
alert("just about to call initflex");
initflexsliders();
$(this).tab('show');
})
</script>
<script type="text/javascript">
$(window).load(function(){
initflexsliders();
});
</script>
<script type="text/javascript">
function initflexsliders(){
$('#carousel1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider1'
});
$('#slider1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel1",
});
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel2",
});
}
</script>
有人有什么想法吗?我希望这很简单,但它让我抓狂?
最佳答案
我也有解决方案,这适用于 flexslider 2.5
我们在选项卡已打开时捕获事件,然后初始化 flexslider:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var selectedTab = $(e.target).attr("href") // activated tab
if( $(selectedTab + ' .flexslider' ).length ){
$(window).trigger('resize'); //this should fix for you but you can also try this
var carousel_sliders = $(selectedTab + ' .flexslider');
for (var i = 0; i < carousel_sliders.length; i++) {
var element = carousel_sliders.eq(i);
element.flexslider({
animation: "slide",
controlsContainer: $(selectedTab + " .custom-navigation-m .custom-controls-container"),
customDirectionNav: $(selectedTab + " .custom-navigation-m a")
});
}
}
});
关于javascript - Bootstrap 选项卡中的两个或多个 Flexslider2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17674351/