jQuery Bootstrap 轮播不滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22152206/
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 not sliding
提问by Robin
I have been trying to use the Bootstrap Carousel and have been successful to some extent. I can click and change the images too. But I have got one problem. Its just not sliding! Where am I doing wrong?
我一直在尝试使用 Bootstrap Carousel，并且在某种程度上取得了成功。我也可以单击并更改图像。但我有一个问题。它只是不滑动！我哪里做错了？
html:
html：
<div id="my_carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target = "#my_carousel" data-slide-to = "0" class="active"></li>
<li data-target = "#my_carousel" data-slide-to = "1"></li>
<li data-target = "#my_carousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner i">
<div class="item active">
<img src="images/f3.jpg" alt = "i1" class="img-responsive">
</div>
<div class="item">
<img src="images/f2.jpg" alt = "i2" class="img-responsive">
</div>
<div class="item">
<img src="images/f1.jpg" alt = "i3" class="img-responsive">
</div>
</div>
<a class="carousel-control left" href="#my_carousel" data-slide = "prev">
<span class="icon-prev left"></span>
</a>
<a class="carousel-control right" href="#my_carousel" data-slide = "next">
<span class="icon-next right"></span>
</a>
</div>
EDIT:
编辑：
jquery:
查询：
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
回答by Kakar
Did you include this script:
您是否包含此脚本：
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>
Edit
编辑
And even it its not working, please check whether you are calling the above script before calling the jquery. So, it should be like this:
即使它不起作用，请在调用jquery之前检查您是否正在调用上述脚本。所以，它应该是这样的：
<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
<!-- Carousel -->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel({
interval: 3000
})
});
</script>
回答by Ryan Taylor
I just recently downloaded bootstrap carousel (v3.2.0) it doesn't work with the newest version of jQuery (v1.11) because of this line:
我最近刚刚下载了 bootstrap carousel (v3.2.0) 它不能与最新版本的 jQuery (v1.11) 一起使用，因为这一行：
if ($.support.transition && this.$element.hasClass('slide')) {
The part $.support.transitionwas for jQuery internal use and has been deprecated, removing just that should allow your code to work again. Better yet, you could/should replace it with Modernizr's feature detection property: Modernizr.csstransitions.
该部分$.support.transition供 jQuery 内部使用，已被弃用，删除该部分应该可以让您的代码再次工作。更好的是，您可以/应该用 Modernizr 的特征检测属性替换它：Modernizr.csstransitions.
UPDATE:Also jQuery v11.1 does not support .emulateTransitionEnd. To solve these issues make sure you include transition.js in your package. It contains the following code:
更新：此外 jQuery v11.1 不支持.emulateTransitionEnd. 要解决这些问题，请确保在包中包含 transition.js。它包含以下代码：
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
WebkitTransition : 'webkitTransitionEnd',
MozTransition : 'transitionend',
OTransition : 'oTransitionEnd otransitionend',
transition : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false
var $el = this
$(this).one('bsTransitionEnd', function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
$(function () {
$.support.transition = transitionEnd()
if (!$.support.transition) return
$.event.special.bsTransitionEnd = {
bindType: $.support.transition.end,
delegateType: $.support.transition.end,
handle: function (e) {
if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
}
}
})
}(jQuery);
回答by samnau
Ryan Taylor's answer helped me with this problem, but instead of removing the check for $.support.transition from carousel.js, I added this little patch JS to my build to fill the gap left by jQuery:
Ryan Taylor 的回答帮助我解决了这个问题，但我没有从 carousel.js 中删除 $.support.transition 的检查，而是在我的构建中添加了这个小补丁 JS 以填补 jQuery 留下的空白：
https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js
https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js
回答by lozadaOmr
Bootstrap.jsuses functions from jQuery.js
Bootstrap.js使用函数来自 jQuery.js
so you should load jQuery.js before Boostrap.js
所以你应该在 Boostrap.js 之前加载 jQuery.js
<script src="jQuery.js"></script>
<script src="bootstrap.js></script>
Plugin dependencies
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.
插件依赖
一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于 jQuery（这意味着 jQuery 必须包含在插件文件之前）。请查阅我们的 bower.json 以查看支持哪些 jQuery 版本。
回答by mre
You shouldn't need the javascript. The following should be enough,
你不应该需要javascript。以下应该足够了，
<div id="my_carousel" class="carousel slide container" data-ride="carousel">
回答by Xcoder
Make sure you include this link
确保包含此链接
<script src="bootstrap/js/bootstrap.min.js"></script>
回答by Gennady G
Strange, but if I RemoveData() and re-initialize carousel, it works like a charm
奇怪，但如果我 RemoveData() 并重新初始化轮播，它就像一个魅力
//Function to animate slider captions
function doAnimations(elems) {
//Cache the animationend event in a variable
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
//Variables on page load
var $myCarousel = $('#myCarousel'),
$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
//Initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
// --------------------------------------------------
//Pause carousel and remove data
$myCarousel.carousel('pause').removeData();
//Re-initialize carousel
$myCarousel.carousel();
//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
回答by kupaff
I had the same problem and I was able to get it working by adding this snippet to my code.
我遇到了同样的问题，我可以通过将此代码段添加到我的代码中来使其正常工作。
<script>
$(function(){
// Activate Carousel
$("#myCarousel").carousel();
});
</script>
