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>