Bootstrap轮播显示两个图像

Question

所以我找到了一个用于幻灯片放映的bootstrap轮播模板，我有一个问题，它有时同时显示2个活动图像，有时它正常工作。

jQuery(document).ready(function($) {

    $('#myCarousel').carousel({
        interval: 6000
    });

    $('#carousel-text').html($('#slide-content-0').html());

    //Handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
        var id = this.id.substr(this.id.lastIndexOf("-") + 1);
        var id = parseInt(id);
        $('#myCarousel').carousel(id);
    });


    // When the carousel slides, auto update the text
    $('#myCarousel').on('slid.bs.carousel', function (e) {
        var id = $('.item.active').data('slide-number');
        $('#carousel-text').html($('#slide-content-'+id).html());
    });
});

这里有两个项目

<div class="active item" data-slide-number="0">
    <a href="<?php echo do_shortcode( '[get_sheet_value location="Sheet1!E2"]' ); ?>">
         <img src=" <?php echo do_shortcode( '[get_sheet_value location="Sheet1!B2"]' ); ?>">
    </a>
</div>
<div class="item" data-slide-number="1">
    <a href="<?php echo do_shortcode( '[get_sheet_value location="Sheet1!E3"]' ); ?>">
        <img src="<?php echo do_shortcode( '[get_sheet_value location="Sheet1!B3"]' ); ?>">
    </a>
</div>