Bootstrap轮播冲突flexslider答案

【问题标题】：Bootstrap carousel conflict flexsliderBootstrap轮播冲突flexslider
【发布时间】：2014-03-14 15:50:52
【问题描述】：

我使用了 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"
  });

或者请推荐其他滑块。我想显示嵌套滑块。任何人的帮助都应该受到赞赏。

【问题讨论】：

标签： jquery html css twitter-bootstrap flexslider

【解决方案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>

【讨论】：