twitter-bootstrap Twitter Bootstrap Carousel：左右箭头不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17536379/
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
Twitter Bootstrap Carousel: Right & Left arrows not working
提问by farjam
The arrows for BS carousel are not moving the items back and forth
BS carousel 的箭头不会来回移动物品
I'm suspecting this might be either a CSS issue or have something to do with the fact that the carousel is being used inside the tabs.
我怀疑这可能是 CSS 问题，或者与在选项卡内使用轮播这一事实有关。
回答by Mark E
I had the same problem, it was caused because my page was scroll based so I put in a little script to smooth the scroll of every link which started with #. This screwed the left and right buttons because they use href="#myCarousel".
To solve this problem I added an exception to the script like down here.
This is the script before I modified it:
我遇到了同样的问题，这是因为我的页面是基于滚动的，所以我放入了一个小脚本来平滑每个以#. 这拧紧了左右按钮，因为它们使用href="#myCarousel".
为了解决这个问题，我在脚本中添加了一个例外，如下所示。
这是我修改之前的脚本：
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
And I just added an exception with thw href attribute:
我刚刚添加了一个带有 thw href 属性的例外：
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if( $(this).attr("href")=="#myCarousel") return;//This is the exception
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
This answer is year and a half late but I hope it helps someone else.
这个答案晚了一年半，但我希望它可以帮助其他人。
edit 3/12/2015:
You can also use the data-targetattribute instead of href
2015 年 3 月 12 日编辑：
您还可以使用该data-target属性代替href
回答by Mohammad Dohadwala
Is your HTML formatted like this?
你的 HTML 格式是这样的吗？
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 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>
Hope that helps!
希望有帮助！
回答by Alper Guven
My Carousel was not working too, and I changed many things. However finally I discover the problem; my problem is smooth scroll and wow.js. Actually, I could not press the prev or next button because of smooth scroll thing. When I try to press button, page is going down or up. Due to that, I change my smooth init and wow init like that.
我的 Carousel 也不能正常工作，我改变了很多东西。然而最后我发现了问题；我的问题是平滑滚动和 wow.js。实际上，由于平滑滚动，我无法按下上一个或下一个按钮。当我尝试按下按钮时，页面向下或向上。因此，我改变了我的平滑初始化和哇初始化。
Smooth Scroll:
平滑滚动：
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if( $(this).attr("href")=="#CarouselSlider") return;
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 900);
return false;
}
}
});
});
});
and also Wow.js init:
还有 Wow.js 初始化：
$(document).ready(
function() {
$("html").niceScroll({
cursorcolor:"#ba8e16",
scrollspeed :"100",
cursorborder:"1px solid #cf9c11",
horizrailenabled: "false",
cursorborderradius: "0px"
});
}
); new WOW().init();
); 新哇().init();
Now, horizontal smooth is over and my problem disappear somehow. I hope, it will help.
现在，水平平滑结束了，我的问题不知何故消失了。我希望，它会有所帮助。
回答by deboranis
Same thing happened to me. Turns out I just had the bootstrap script on the before the jquery script. Changed this and then it worked fine.
同样的事情发生在我身上。原来我只是在 jquery 脚本之前有引导脚本。改变了这一点，然后它工作正常。
回答by anxiety
Bootstrap depends on jQuery. Check out their getting-started template.
Bootstrap 依赖于 jQuery。查看他们的入门模板。
回答by Nick
Place JQ and your bootstrap.min.js at the bottom of your page just before </body>, like this:
将 JQ 和 bootstrap.min.js 放在页面底部的 </body> 之前，如下所示：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
Keep in mind you need a version of JQ that works with your version of bootstrap. I'm using bootstrap version 2, so I need JQ 1.11.1
请记住，您需要一个适用于您的引导程序版本的 JQ 版本。我使用的是引导程序版本 2，所以我需要 JQ 1.11.1
回答by L105
You need to include boostrap.js after jQuery to make it work. I also found an error for a link to jQuery :
您需要在 jQuery 之后包含 boostrap.js 才能使其工作。我还发现 jQuery 链接的错误：
<script type='text/javascript' src='/ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
should be
应该
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
