jQuery Bootstrap carousel next 和 prev 功能不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15819943/
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 next and prev function not working
提问by alyus
Using latest version and have the basic carousel. I've got it working with all the default settings, however when trying to add or stop certain functions, things break or don't work at all. I want to be able to manually cycle through the images. Don't want it to auto cycle. I want to just use the next and prev buttons to cycle through. I've read a few post on here but the solutions don't work help/work.
使用最新版本并拥有基本的轮播。我已经在所有默认设置下使用它，但是当尝试添加或停止某些功能时，事情会中断或根本不起作用。我希望能够手动循环浏览图像。不想让它自动循环。我只想使用 next 和 prev 按钮来循环。我在这里阅读了一些帖子，但解决方案不起作用帮助/工作。
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<ul class="thumbnails">
<li>Img</li>
<li>Img</li>
<li>Img</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li>Img</li>
<li>Img</li>
<li>Img</li>
</ul>
</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>
$('#myCarousel').each(function() {
$(this).carousel({
interval: false
});
});
回答by lucuma
You can wire the events up yourself:
您可以自己连接事件：
$('.carousel-control.left').click(function() {
$('#myCarousel').carousel('prev');
});
$('.carousel-control.right').click(function() {
$('#myCarousel').carousel('next');
});
You can of course use the data-slideas well just depends on what you want to do. Something like this which does the same as above.
您当然也可以使用 ，data-slide这取决于您想要做什么。像这样的东西和上面一样。
$('a[data-slide="prev"]').click(function() {
$('#myCarousel').carousel('prev');
});
$('a[data-slide="next"]').click(function() {
$('#myCarousel').carousel('next');
});
回答by Anneke Sinnema
I had some difficulty pasting code in a comment (newbie :) ) but I took Lucuma's post and added some code to prevent both previous and next links from working as a inline page anchor. Using the code below, you stop that from happening but still slide backwards/forwards like you wanted.
我在评论中粘贴代码时遇到了一些困难（新手 :) ），但我接受了 Lucuma 的帖子并添加了一些代码以防止上一个和下一个链接作为内联页面锚点工作。使用下面的代码，您可以阻止这种情况发生，但仍然可以像您想要的那样向后/向前滑动。
// Fixes the prev/next links of the sliders
$('.carousel-control.left').click(function(e) {
e.stopPropagation();
$('.js-carousel').carousel('prev');
return false;
});
$('.carousel-control.right').click(function(e) {
e.stopPropagation();
$('.js-carousel').carousel('next');
return false;
});
