Bootstrap傳送帶衝突flexslider

Question

我使用了Bootstrap傳送帶。如果我在項目中包含柔性滑塊，則柔性滑塊不起作用。如果我刪除bootstrap.js，則Flex滑塊正在工作。但傳送帶不工作。

HTML：

<div class="carousel-inner"> 
<div class="item active">img here</div> 
<div class="item">img here</div> 
<div> 
<div class="flexslider"> 
    <ul class="slides"> 
    <li> img here</li> 
    <li>img here</li> 
</ul> 
</div> 
</div> 
</div> 



Script: 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 

或者請推薦其他滑塊。我想顯示嵌套的滑塊。任何人的幫助應該被讚賞。

Answer 1

Flexslider 2.2適用於jQuery 1.7您需要下載幷包含來自http://flexslider.woothemes.com/thumbnail-slider.html的jquery.flexslider-min.js和flexslider.css。然後包括你的頁面上下面的JavaScript：

<script type="text/javascript"> 
$(window).load(function() { 
// The slider being synced must be initialized first 
$('#carousel').flexslider({ 
animation: "slide", 
controlNav: false, 
animationLoop: false, 
slideshow: false, 
itemWidth: 210, 
itemMargin: 5, 
asNavFor: '#slider' 
}); 

$('#slider').flexslider({ 
animation: "slide", 
controlNav: false, 
animationLoop: false, 
slideshow: false, 
sync: "#carousel" 
}); 
}); 
</script> 

那麼你的HTML應該是這樣的結構：

<div id="slider" class="flexslider"> 
<ul class="slides"> 
<li> 
    <img src="slide1.jpg" /> 
</li> 
<li> 
    <img src="slide2.jpg" /> 
</li> 
<li> 
    <img src="slide3.jpg" /> 
</li> 
<li> 
    <img src="slide4.jpg" /> 
</li> 

</ul> 
</div> 

<div id="carousel" class="flexslider"> 
<ul class="slides"> 
<li> 
    <img src="slide1.jpg" /> 
</li> 
<li> 
    <img src="slide2.jpg" /> 
</li> 
<li> 
    <img src="slide3.jpg" /> 
</li> 
<li> 
    <img src="slide4.jpg" /> 
</li> 
</ul> 
</div>