jQuery Bootstrap 3 轮播控件和指示器链接不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19122958/
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 3 carousel controls and indicator links not working
提问by Primoz Rome
I am scratching my head why Bootstrap 3 carousel controls (and indicator) links are not working on my page. It was a simple copy-paste from docs + a little of CSS customization. Code can be seen here http://bevog.si.bitcloud.nine.ch/(#gallery).
我正在挠头，为什么 Bootstrap 3 轮播控件（和指示器）链接在我的页面上不起作用。这是来自文档的简单复制粘贴 + 一些 CSS 自定义。代码可以在这里看到http://bevog.si.bitcloud.nine.ch/(#gallery)。
UPDATE:
更新：
Carousel init code
轮播初始化代码
/* GALLERY */
$('#gallery-carousel').carousel()
Carousel markup
轮播标记
<div id="gallery-carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#bevog-image-1" data-slide-to="0" class="active"></li>
<li data-target="#bevog-image-2" data-slide-to="1"></li>
<li data-target="#bevog-image-3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" id="bevog-image-1">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
<div class="item" id="bevog-image-2">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
<div class="item" id="bevog-image-3">
<img src="img/bevog_gallery_01.jpg" alt="Bevog gallery picture title">
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#"><span class="icon-next"></span></a>
</div>
回答by DigTheDoug
The carousel links' anchor tags need to have an href that points to the id of the carousel. See Bootstrap docs.
轮播链接的锚标签需要有一个指向轮播 ID 的 href。请参阅 Bootstrap 文档。
<a class="left carousel-control" data-slide="prev" href="#gallery-carousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#gallery-carousel"><span class="icon-next"></span></a>
回答by Chirag Mishra
I have been having a similar issue with the indicators(not working). For indicators, you can add this to your JS...This will manually set the same function for the indicators :
我一直有与指标类似的问题（不工作）。对于指标，您可以将其添加到您的 JS...这将为指标手动设置相同的功能：
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide-to');
$('.carousel-inner .item').each(function(index){
if($(this).data('id') == goTo){
goTo = index;
return false;
}
});
$('#gallery-carousel').carousel(goTo);
});
回答by Sólon
$('.carousel-control').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide');
if(goTo=="prev") {
$('#carousel-id').carousel('prev');
} else {
$('#carousel-id').carousel('next');
}
});
回答by bhaskarc
Perils of copy-paste.
复制粘贴的危险。
After having wasted several hours on getting the controls to work, I discovered that my code had yet another carousel in the navbar with the same ID #myCarousel
在让控件工作上浪费了几个小时之后，我发现我的代码在导航栏中还有另一个具有相同 ID 的轮播 #myCarousel
Just in case some one faces the same issue.
以防万一有人面临同样的问题。
回答by Dejazmach
Replace each href attribute with data-target in your carousel right and left controls.
将轮播左右控件中的每个 href 属性替换为 data-target。
回答by Dawn
I was having the same issue as well with the carousel not loading. I switched from loading the minified version of bootstrap to the full one and then it worked. Me thinks there's something not quite right in the mini.
我也遇到了同样的问题，轮播没有加载。我从加载引导程序的缩小版本切换到完整版本，然后它起作用了。我认为迷你车有些不对劲。
