Javascript Bootstrap Carousel Transitions 和 Prev/Next 按钮不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12548954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Carousel Transitions and Prev/Next Buttons Not Working
提问by Daniil Ryzhkov
I'm trying to implement the twitter bootstrap carousel, and it's not working - it doesn't switch images automatically, AND the previous/next buttons don't work.
我正在尝试实现 twitter bootstrap carousel，但它不起作用 - 它不会自动切换图像，并且上一个/下一个按钮不起作用。
I've tried switching to jquery 1.7.1 as suggested on Bootstrap Carousel Not Automatically Slidingand Bootstrap Carousel Not working, but nothing seems to help.
我已经尝试按照Bootstrap Carousel Not Automatically Sliding和Bootstrap Carousel Not working上的建议切换到 jquery 1.7.1 ，但似乎没有任何帮助。
Any ideas would be appreciated.
任何想法，将不胜感激。
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Test</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap-transition.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" style="width:450px">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active"><img src="img/IMG_2.jpg"></div>
<div class="item"><img src="img/IMG_3.jpg"></div>
<div class="item"><img src="img/IMG_1.jpg"></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>
</body>
</html>
You can view it and its linked files at www.abbymilberg.com/bootstrap.
您可以在www.abbymilberg.com/bootstrap 上查看它及其链接的文件。
回答by user2139170
I had the same problem, even including .js in the propper order, and I fixed it unsing javascript on 'onclick' event as follows:
我遇到了同样的问题，即使在正确的顺序中包含 .js，我也修复了它，在 'onclick' 事件上取消了 javascript，如下所示：
<a class="left carousel-control" href="#myCarousel" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">?</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next" onclick="$('#myCarousel').carousel('next')">?</a>
I know that it's not the cleanest solution but it works.
我知道这不是最干净的解决方案，但它有效。
回答by Daniil Ryzhkov
You should include bootstrap.js after you include jquery.js:
你应该在包含 jquery.js 之后包含 bootstrap.js：
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/bootstrap.js"></script>
回答by Kimmiekim
I had the same issue and I fixed it by adding z-index to the css:
我遇到了同样的问题，我通过向 css 添加 z-index 来修复它：
.carousel-control.left, .carousel-control.right {
left: 0;
z-index: 1;
}
回答by Celena jas
<div class="left carousel-control" data-target="#myCarousel" data-slide="prev"/>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</div>
<div class="right carousel-control" data-target="#myCarousel" data-slide="next"/>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</div>
回答by noel
Try closing "carousel-inner" before the controls start
在控件开始之前尝试关闭“carousel-inner”
<div id="myCarousel" class="carousel slide" style="width:450px">
<div class="carousel-inner">
<div class="item active"><img src="img/IMG_2.jpg"></div>
<div class="item"><img src="img/IMG_3.jpg"></div>
<div class="item"><img src="img/IMG_1.jpg"></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>
回答by cssyphus
Further to the answer by user2139170, this is the correct way to structure your carousel (BootStrap 3.3.5):
进一步回答user2139170，这是构建轮播的正确方法（BootStrap 3.3.5）：
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
<br>
<span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
</div>
<div class="item">
<h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
<br>
<span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
</div>
</div>
<a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- #myCarousel -->
<script>
$(function(){
$('.carousel-control').click(function(e){
e.preventDefault();
$('#myCarousel').carousel( $(this).data() );
});
});//END document.ready
</script>
Note: this answer requires jQuery, so ensure that library is loaded. Of course, bootstrap requires jQuery so you should already have it referenced.
注意：此答案需要 jQuery，因此请确保加载了库。当然，bootstrap 需要 jQuery，所以你应该已经引用了它。
回答by Antoine Bolvy
I had the same symptoms, but my problem was that I didn't included an id to my carousel. Adding an id on the same div that has the .carouselclass, and using href="#my-carousel"on the button/links solved the problem for me, as suggested by other users in the comments.
我有相同的症状，但我的问题是我的轮播中没有包含 id。正如其他用户在评论中所建议的那样，在具有.carousel该类的同一个 div 上添加一个 id ，并href="#my-carousel"在按钮/链接上使用为我解决了这个问题。
<div id="my-carousel" class="carousel slide" style="width:450px">
^----------------------------------v
<a class="carousel-control left" href="#my-carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#my-carousel" data-slide="next">›</a>
</div>
回答by Sourabh Chavan
if you adding 2 sliders on the same page just change the ids of sliders.
如果您在同一页面上添加 2 个滑块，只需更改滑块的 id。
like . . ... your slider code ... . .
喜欢 。. ...您的滑块代码...。.
<a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
