如何修复 Bootstrap Carousel 'offSetWidth' 错误答案

【问题标题】：How can I fix a Bootstrap Carousel 'offSetWidth' error如何修复 Bootstrap Carousel 'offSetWidth' 错误
【发布时间】：2016-05-19 06:23:58
【问题描述】：

我用 Bootstrap 创建了一个轮播然后我得到这个错误：Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.Cause the error I can't slip my carousel control.

这是我的 HTML：

<div id="carousel-example-generic" class="carousel slide center" data-ride="carousel" >
   <div class="carousel-inner center" role="listbox" style="width:500px;height: 500px;margin: auto" ></div>
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span></a>
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
     </a>
</div>

这是我的 JavaScript：

$('a.certPhoto').click(function () {
        $('#photoDialog').modal('show');
        var _a = $(this).parents("tr");
        $("#photoDialog span.p_name").text(_a.find('.real_name').text());
        $("#photoDialog span.p_type").text(_a.find('.cert_type').text());
        $("#photoDialog span.p_ID").text(_a.find('.cert').text());
        var photo = $(this).data('photo');
        var _html = "";
        for (var i = 0, len = photo.length; i < len; i++) {
            if (i == 0) {
                _html += '<div class="item active"> <img src="' + photo[i] + '" alt=""  ><div class="carousel-caption"> </div></div>';
            } else {
                _html += '<div class="item"> <img src="' + photo[i] + '" alt=""><div class="carousel-caption"> </div></div>';
            }
        }
        $('.carousel-inner').html(_html);
        $(".carousel-inner img").each(function (i) {
            var img = $(this);
            var realWidth;
            var realHeight;
            $("<img/>").attr("src", $(img).attr("src")).load(function () {
                realWidth = this.width;
                realHeight = this.height;
                if (realWidth >= realHeight) {
                    if (realWidth > 500) {
                        $(img).css("width", "500px");
                    }
                } else {
                    if (realHeight > 500) {
                        var _left = 500 * (1 - realWidth / realHeight) / 2;
                        $(img).css("height", '500px').css('margin-left', _left + "px");
                    }
                }
            });
        });

    });

我发现了一些类似的问题，但它们似乎不适用于我。导致类似问题的原因主要是缺少“活动”类，但我没有。奇怪的是这个错误意外发生。当我刷新窗口时，此错误将得到修复。

任何建议都会很棒。谢谢！

【问题讨论】：

标签： javascript twitter-bootstrap carousel

【解决方案1】：

那是因为.carousel-inner 中没有以item 开头的元素。添加一些.item 后，您需要调用$('.carousel').carousel() 来初始化轮播。

这是 Bootstrap 轮播文档的link。

【讨论】：

THX，这就是修复！