如何修复引导转盘“”offSetWidth“”错误

Question

我用Bootstrap创建了一个旋转木马，然后我得到了这个错误：Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.导致错误我不能滑动我的旋转木马控件。

这是我的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");
                    }
                }
            });
        });

    });

​

我已经发现了一些类似的问题，但他们似乎不适用于me.The的原因，因为类似的问题大多是缺乏类'active‘，但我的not.And这是奇怪的是，这个错误发生的accident.When我刷新我的窗口，然后这个错误将被修复。

任何建议都是great.Thanks！

Answer 1

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

下面是Bootstrap carousel文档的link。