本文介绍了是否有可能在一个页面上有多个Twitter Bootstrap轮播？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
：$ b $ b <！DOCTYPE html>
< head>
< script type =text / javascript>
$（document）.ready（function（）{
$（'。carousel'）。each（function（）{
$（this）.carousel（{
pause ：true，
interval：false
}）;
}）;
}）;
< / script>
< script src =http://twitter.github.com/bootstrap/assets/js/jquery.js>< / script>
< script src =http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js>< / script>
< script src =http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js>< / script>
< / head>
< body>
< div id =carousel-1class =carousel slide>
< div class =carousel-inner>
< div class =active item> ...< / div>
< div class =item> ...< / div>
< div class =item> ...< / div>
< / div>
<！ - Carousel nav - >
< a class =carousel-control lefthref =＃myCarouseldata-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃myCarouseldata-slide =next>& rsaquo;< / a>
< / div>
< div id =carousel-2class =carousel slide>
< div class =carousel-inner>
< div class =active item> ...< / div>
< div class =item> ...< / div>
< div class =item> ...< / div>
< / div>
<！ - Carousel nav - >
< a class =carousel-control lefthref =＃myCarouseldata-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃myCarouseldata-slide =next>& rsaquo;< / a>
< / div>
< / body>
< / html>
示例CSS：
问题：对于两个引导轮播工作在一个页面上，基本上，我需要为它们的div容器设置两个不同的ID（＃carousel-1 和＃转盘-2 ）。但我注意到，除非使用 #myCarousel 作为div容器的ID，否则传送带不起作用。
更改轮播导航链接中的href以匹配您所控制的旋转木马的ID值。该href值是bootstrap如何确定要滑动的。所以你需要改变以下内容：
< a class =carousel-control lefthref =＃carousel- 1data-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃carousel-1data-slide =next>& rsaquo;< / a>
第二个轮播：
< a class =carousel-control lefthref =＃carousel-2data-slide =prev>& lsaquo;< / a>
< a class =carousel-control righthref =＃carousel-2data-slide =next>& rsaquo;< / a>
Twitter Bootstrap Version: 2.0.3
Example HTML code:
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').each(function(){
$(this).carousel({
pause: true,
interval: false
});
});
});
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="carousel-1" class="carousel slide">
<!-- 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>
<div id="carousel-2" class="carousel slide">
<!-- 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>
</body>
</html>
Example CSS: bootstrap.css
Problem: For two bootstrap carousels to work on a page, basically, I need to set two different IDs for their div containers (#carousel-1 and #carousel-2). But I've noticed that the carousels do not work unless I use #myCarousel as the ID of the div container.
In that case, how can I have multiple carousels on a single page?
解决方案
Change the href in your carousel nav links to match the id value of the carousel you're controlling. That href value is how bootstrap determines which to slide. So you will need to change the following:
<a class="carousel-control left" href="#carousel-1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">›</a>
And for the second carousel:
<a class="carousel-control left" href="#carousel-2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">›</a>
这篇关于是否有可能在一个页面上有多个Twitter Bootstrap轮播？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！