gpt4 book ai didi

javascript - 是否可以在一个页面上有多个 Twitter Bootstrap 轮播?

转载 作者:技术小花猫 更新时间:2023-10-29 11:48:11 26 4
gpt4 key购买 nike

Twitter Bootstrap 版本:2.0.3

示例 HTML 代码:

<!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">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</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">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</body>
</html>

示例 CSS: bootstrap.css

问题:为了让两个 Bootstrap 轮播在一个页面上工作,基本上,我需要为它们的 div 容器设置两个不同的 ID(#carousel-1#carousel-2).但我注意到,除非我使用 #myCarousel 作为 div 容器的 ID,否则轮播不起作用。

在那种情况下,我怎样才能在一个页面上有多个轮播?

最佳答案

更改轮播导航链接中的 href 以匹配您控制的轮播的 id 值。该 href 值是 Bootstrap 如何确定要滑动的内容。因此,您需要更改以下内容:

<a class="carousel-control left" href="#carousel-1" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-1" data-slide="next">&rsaquo;</a>

对于第二个轮播:

<a class="carousel-control left" href="#carousel-2" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#carousel-2" data-slide="next">&rsaquo;</a>

关于javascript - 是否可以在一个页面上有多个 Twitter Bootstrap 轮播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10521257/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com