Bootstrap轮播冲突flexslider

Question

我使用了Bootstrap轮播。如果我在项目中包含flex-slider，则flex滑块不起作用。如果我删除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>