CODEWITHSUNDEEP
javascripttwitter-bootstrapcarousel
Linhui Li
Linhui Li

Reputation: 11

How can I fix a Bootstrap Carousel 'offSetWidth' error

I created a carousel with Bootstrap and then I get this error:Uncaught TypeError: Cannot read property 'offsetWidth' of undefined.Cause the error I cant slide my carousel control.

Here is my 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>

And here is my 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");
                    }
                }
            });
        });

    });

I've found a few similar problems, but they don't appear applicable to me.The reason cause the similar problems mostly is lack of the class 'active' but I'm not.And it is strange that this error happened by accident.When I refresh my window then this error will be fixed.

Any suggestions would be great.Thanks!

Upvotes: 1

Views: 1314

Answers (1)

Haizhou Liu
Haizhou Liu

Reputation: 491

That is because there is no elements in .carousel-inner with class item at beginning. After you add some .item, you need call $('.carousel').carousel() to initial the carousel.

Here is the link for Bootstrap carousel documents.

Upvotes: 1

Related Questions