jquery - Bootstrap 轮播冲突 flexslider

Question

我使用了 Bootstrap 轮播。如果我在元素中包含 flex-slider，则 flex slider 不起作用。如果我删除 bootstrap.js，则 flex slider 可以正常工作。但是旋转木马不工作。

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"
  });

或者请建议其他 slider 。我想显示嵌套 slider 。任何人的帮助都应该受到赞赏。

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>