Bootstrap 3 Carousel随机点击冻结问题排查求助

先拆解下你遇到的两个核心问题：轮播随机冻结（点击箭头后.active类不切换），以及添加过渡检测脚本后出现的TypeError。这些问题主要源于版本不兼容和过时的过渡支持检测逻辑，下面给你一步步的解决方案：

1. 统一Bootstrap的CSS与JS版本 #

你当前使用的Bootstrap CSS是3.4.0，但JS是3.3.7，版本不一致会导致样式与脚本逻辑不匹配（比如过渡动画的触发时机、类名处理差异），这很可能是轮播随机冻结的诱因之一。

把CSS和JS统一为同一版本，比如都用3.3.7：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

或者都升级到3.4.0，效果是一样的，只要保持版本统一即可。

2. 替换过时的过渡检测脚本，兼容jQuery 2.x #

你添加的那个过渡检测脚本比较老旧，在jQuery 2.x环境下会因为废弃的API导致Cannot convert undefined or null to object错误。咱们用一个适配jQuery 2.x和Bootstrap 3的检测逻辑替代它，放在Bootstrap.js加载之后：

;(function($) {
  // 仅当$.support.transition未定义时才执行检测
  if (typeof $.support.transition === 'undefined') {
    var body = document.body || document.documentElement,
        style = body.style,
        support = $.support;

    support.transition = (function() {
      // 检测浏览器支持的过渡结束事件
      var transitionEnd = (function() {
        var transEndEventNames = {
          WebkitTransition : 'webkitTransitionEnd',
          MozTransition    : 'transitionend',
          OTransition      : 'oTransitionEnd otransitionend',
          transition       : 'transitionend'
        };
        for (var name in transEndEventNames) {
          if (style[name] !== undefined) {
            return transEndEventNames[name];
          }
        }
      })();

      // 返回是否支持CSS过渡
      return transitionEnd !== undefined;
    })();
  }
})(jQuery);

为什么这个能解决问题？Bootstrap 3的Carousel依赖$.support.transition来判断是否启用过渡动画，如果这个值检测错误，脚本会一直等待一个不存在的过渡结束事件，导致.active类无法切换，最终轮播冻结。新的检测逻辑更可靠，适配现代浏览器，同时和jQuery 2.x完全兼容。

3. 手动初始化轮播，避免自动初始化的潜在问题 #

虽然data-ride="carousel"可以自动初始化轮播，但手动初始化能确保DOM完全加载后再执行初始化逻辑，避免因DOM未就绪导致的初始化不完整。在上面的脚本后面加上：

$(document).ready(function() {
  $('#banner-carousel').carousel();
});

修改后的完整代码示例 #

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
    // 修复$.support.transition检测逻辑
    ;(function($) {
      if (typeof $.support.transition === 'undefined') {
        var body = document.body || document.documentElement,
            style = body.style,
            support = $.support;

        support.transition = (function() {
          var transitionEnd = (function() {
            var transEndEventNames = {
              WebkitTransition : 'webkitTransitionEnd',
              MozTransition    : 'transitionend',
              OTransition      : 'oTransitionEnd otransitionend',
              transition       : 'transitionend'
            };
            for (var name in transEndEventNames) {
              if (style[name] !== undefined) {
                return transEndEventNames[name];
              }
            }
          })();

          return transitionEnd !== undefined;
        })();
      }
    })(jQuery);

    // 手动初始化轮播
    $(document).ready(function() {
      $('#banner-carousel').carousel();
    });
  </script>
</head>
<body>
  <div class="container">
    <div id="banner-carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#banner-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#banner-carousel" data-slide-to="1"></li>
        <li data-target="#banner-carousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <h1>First</h1>
        </div>
        <div class="item">
          <h1>Second</h1>
        </div>
        <div class="item">
          <h1>Third</h1>
        </div>
      </div>
      <a class="left carousel-control" href="#banner-carousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#banner-carousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</body>

额外排查建议 #

• 检查页面中是否有其他脚本干扰jQuery或Bootstrap的功能，比如其他库覆盖了$变量，或者修改了$.support对象。
• 打开浏览器控制台，确认没有其他报错——其他脚本错误可能会中断Bootstrap Carousel的逻辑执行。

内容的提问来源于stack exchange，提问作者Loris Tujiba