我正在使用Twitter Bootstrap建立一个包含多个轮播的网站。这个想法是,我希望有一个带有指示器和控件的主轮播,没有它们的辅助轮播,并从单个轮播控件(即主轮播)同时控制所有轮播。
编辑:嗯,实际上不是全部,而是大多数。我正在专门研究使用单个轮播控件针对一组类/ID,但让其他一些类/ID仍然自主工作......
示例代码:
<!-- One Carousel to rule them all -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- The ruled carousel -->
<div id="myCarousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
</div>
问题是,具有相同 ID 的轮播不起作用,我不确定如何在轮播导航中从单个 href 定位不同的 ID。我试过:
<a class="carousel-control left" href="#myCarousel #myCarousel2" data-slide="prev">‹</a>
或
<a class="carousel-control left" href="#myCarousel, #myCarousel2" data-slide="prev">‹</a>
或
<a class="carousel-control left" href="#myCarousel" href="#myCarousel2" data-slide="prev">‹</a>
没有运气...
谢谢!
类.carousel
而不是 ID。
<a class="carousel-control left" href=".carousel" data-slide="prev">‹</a>
这是jsFiddle上的一个例子
我删除了carousel-indicators
,因为这可能会使它们全部不同步。
您还希望像这样禁用jQuery的自动滚动。
$('.carousel').carousel({
interval: false
});
为了方便定位页面上的所有轮播,@Schmalzy 的解决方案非常完美。
尽管如此,我想到了针对某一组轮播,并让其余的轮播拥有自己的控件,灵感来自这个问题:将两个 id 放在一个 href 中
由于Javascript是一个选项,他们的关键是在控件上调用JS函数并传递目标ID数组和操作:
<a class="carousel-control left" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'prev')">‹</a>
<a class="carousel-control right" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'next')">›</a>
使用以下 JS:
function slideCarousels(ids, action) {
var len = ids.length;
var id = null;
for (var i = 0; i < len; i++) {
id = ids[i];
$('#' + id).carousel({ slide: action });
}
}
因此,完整的最终代码:
<!-- One Carousel to rule them all -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'prev')">‹</a>
<a class="carousel-control right" href="#" onclick="slideCarousels(['myCarousel', 'myCarousel2'], 'next')">›</a>
</div>
<!-- The ruled carousel -->
<div id="myCarousel2" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
</div>
<!-- The mighty carousel -->
<div id="myCarousel3" class="carousel slide">
<!-- this carousel wouldn't be affected by the controls in '#myCarousel' -->
</div>
<script type="text/javascript">
function slideCarousels(ids, action) {
var len = ids.length;
var id = null;
for (var i = 0; i < len; i++) {
id = ids[i];
$('#' + id).carousel({ slide: action });
}
}
</script>