Bootstrap旋转木马没有滑动

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之前检查是否在调用上面的脚本.所以,它应该是这样的:

<!-- 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>  

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);