Question

我一直在尝试使用Bootstrap Carousel并在某种程度上取得了成功。我也可以点击并更改图片。但我有一个问题。它只是没有滑动！我在哪里做错了？

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>

修改

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>

Answer 1

您是否包含此脚本：

<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 2000
    })
  });    
</script>

修改

即使它不起作用，请在调用jquery之前检查是否正在调用上面的脚本。所以，它应该是这样的：

 <script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script> <script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>  <script language="JavaScript" type="text/javascript"> $(document).ready(function(){ $('.carousel').carousel({ interval: 3000 }) }); </script>

Answer 2

我刚刚下载了bootstrap carousel（v3.2.0），它没有使用最新版本的jQuery（v1.11），因为这行：

if ($.support.transition && this.$element.hasClass('slide')) {

部分$.support.transition用于jQuery内部使用，已被弃用，只是删除它应该允许您的代码再次工作。更好的是，您可以/应该使用Modernizr的功能检测属性替换它：Modernizr.csstransitions。

更新：此外，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);

Answer 3

Bootstrap.js使用jQuery.js

中的函数

所以你应该在Boostrap.js之前加载jQuery.js

<script src="jQuery.js"></script>
<script src="bootstrap.js></script>

插件依赖

某些插件和CSS组件依赖于其他组件   插件。如果您单独包含插件，请务必检查   文档中的这些依赖项。另请注意，所有插件都依赖于   jQuery（这意味着必须在插件文件之前包含jQuery）。   请咨询我们的bower.json，了解支持哪些版本的jQuery。

http://getbootstrap.com/javascript/

Answer 4

Ryan Taylor的回答帮助我解决了这个问题，但是我没有从carousel.js中删除$ .support.transition的检查，而是将这个小补丁JS添加到我的构建中以填补jQuery留下的空白：

https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js

Answer 5

你不应该需要javascript。以下就足够了，

<div id="my_carousel" class="carousel slide container" data-ride="carousel">

Answer 6

确保包含此链接

<script src="bootstrap/js/bootstrap.min.js"></script>

Answer 7

奇怪，但是如果我删除了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);
});

Answer 8

我遇到了同样的问题，我可以通过将此代码段添加到我的代码中来实现它。

  <script>
        $(function(){
            // Activate Carousel
            $("#myCarousel").carousel();
        });
    </script>

Answer 9

检查一下您是否发生过的几件事：

Bootstrap JS文件是否已延迟？如果是这样，请尝试删除“延迟”
即。 <script defer src="bootstrap.min.js">
是否还有另一个滑块/轮播脚本？例如，猫头鹰轮播可能会干扰Bootstrap轮播

Bootstrap旋转木马没有滑动

9 个答案: