Bootstrap 3轮播无法在Google Chrome上运行

Question

我有Bootstrap 3轮播显示4项并推进1项。它在Firefox上运行良好，但它不会在Google Chrome上循环。

这是我的代码

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="col-md-3 col-sm-6 col-xs-12 hover">
                            <div class="image">
                                <img src="images/carosuel_03.png" class="img-responsive" alt="my images">
                                <div class="overlay">
                                    <a class="lightbox overlay-icon" href="#carosuel">
                                        <span class="icon"><i class="fa fa-search"></i></span>
                                    </a>
                                </div>
                            </div>

                            <h4>Aenean sollicitudin</h4>
                            <p>So long as you have food in your mouth,
                                you have solved all questions
                                for the time being.</p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3 col-sm-6 col-xs-12 hover">
                            <div class="image">
                                <img src="images/carosuel1_03.png" class="img-responsive" alt="my images">
                                <div class="overlay">
                                    <a class="lightbox overlay-icon" href="#carosuel1">
                                        <span class="icon"><i class="fa fa-search"></i></span>
                                    </a>
                                </div>
                            </div>

                            <h4>Aenean sollicitudin</h4>
                            <p>So long as you have food in your mouth,
                                you have solved all questions
                                for the time being.</p>

                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3 col-sm-6 col-xs-12 hover">
                            <div class="image">
                                <img src="images/carosuel2_03.png" class="img-responsive" alt="my images">
                                <div class="overlay">
                                    <a class="lightbox overlay-icon" href="#carosuel2">
                                        <span class="icon"><i class="fa fa-search"></i></span>
                                    </a>
                                </div>
                            </div>

                            <h4>Aenean sollicitudin</h4>
                            <p>So long as you have food in your mouth,
                                you have solved all questions
                                for the time being.</p>

                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3 col-sm-6 col-xs-12 hover">
                            <div class="image">
                                <img src="images/carosuel3_03.png" class="img-responsive" alt="my images">
                                <div class="overlay">
                                    <a class="lightbox overlay-icon" href="#carosuel3">
                                        <span class="icon"><i class="fa fa-search"></i></span>
                                    </a>
                                </div>
                            </div>

                            <h4>Aenean sollicitudin</h4>
                            <p>So long as you have food in your mouth,
                                you have solved all questions
                                for the time being.</p>

                        </div>
                    </div>
                    <div class="item">
                        <div class="col-md-3 col-sm-6 col-xs-12 hover">
                            <div class="image">
                                <img src="images/carosuel_03.png" class="img-responsive" alt="my images">
                                <div class="overlay">
                                    <a class="lightbox overlay-icon" href="#carosuel">
                                        <span class="icon"><i class="fa fa-search"></i></span>
                                    </a>
                                </div>
                            </div>

                            <h4>Aenean sollicitudin</h4>
                            <p>So long as you have food in your mouth,
                                you have solved all questions
                                for the time being.</p>

                        </div>
                    </div>

这是css

@media (min-width: 767px) and (max-width: 992px ) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev        { left: -50%; }
.active > div { display:none; }
.active > div:first-child { display:block; }
.active > div:first-child + div { display:block; }
}
@media (max-width: 767px) {
.carousel-inner .active.left { left: -100%; }
.carousel-inner .next        { left:  100%; }
.carousel-inner .prev        { left: -100%; }
.active > div { display:none; }
.active > div:first-child { display:block; }

}
@media (min-width: 992px ) {
.carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev        { left: -25%; }
}
.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}

这是jquery

$('.carousel[data-type="multi"] .item').each(function(){
var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i=0;i<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
    }
});

它在mozilla上工作正常但不在chrome上工作