Динамический Bootstrap Carousal не работает

Question

У меня есть динамическая загрузочная карусель, которая показывает изображения из базы данных.

Все работает нормально, но иногда карусель не двигается ни влево, ни вправо, даже после нажатия кнопки со стрелкой. Но когда я обновляю страницу, она работает нормально,

Мой код выглядит следующим образом .

function show_gallary(id){
    $.ajax({
        url: "<?php echo base_url();?>home/fetch_gallary_modal/"+id,// url to your upload process file
        type: "POST",
        dataType:'json',
        contentType: false,
        cache: true,
        processData:false,// tell jQuery not to set contentType
        success: function(data){
            $(".events").empty();  
            var img = data[0].image.split(",");
            $("#show_gallary").modal('show');
            $("#gal_modal_description").html(data[0].description);
            $("#gal_modal_header").html(data[0].name);
            var cnt=img.length;
            var k=1;
            for(var i=0;i<cnt;i++){
                var url="<?php echo base_url()?>gallery/"+img[i];
                if(i==0){
                    $(".events").append('<div class="item active"><img style="width:50%;" id="gl'+k+'" src="'+url+'"></div>');
                }
                else{
                    $(".events").append('<div class="item"><img style="width:50%;" id="gl'+k+'" src="'+url+'"></div>');
                }
                k++;
            }
        }
    });
}

Carousal div

<div id="myCarousel2" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel2" data-slide-to="1"></li>
        <li data-target="#myCarousel2" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner events"></div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel2" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel2" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

когда я открываю консоль, появляется сообщение об ошибке

Uncaught TypeError: Невозможно прочитать свойство 'offsetWidth' из неопределенного

Я использовал «активный» класс.