多图像旋转木马

Question

这不是问题。我想发布我的合作伙伴修复的代码。我搜索并搜索了如何创建一个多图像轮播，但没有一个代码工作。以下是我们的所作所为：

HTML

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="item">
                        <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="\static\carousel\c1.jpg" class="img-responsive"></a></div>
                        <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="\static\carousel\c2.jpg" class="img-responsive"></a></div>
                        <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="\static\carousel\c3.jpg" class="img-responsive"></a></div>
                        <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="\static\carousel\c4.jpg" class="img-responsive"></a></div>
                    </div>
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="http://placehold.it/500/e499e4/fff&text=1" class="img-responsive"></a></div>
                </div>

                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="\static\carousel\c5.jpg" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img
                            src="http://placehold.it/500/fcfcfc/333&text=8" class="img-responsive"></a></div>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i
                    class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><i
                    class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>

的jQuery

$(document).ready(function(){
    $('.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<4;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

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

CSS

.carousel-control { width:  4%; }
.carousel-control.left,.carousel-control.right {
    margin-
    left:15px;background-
    image:none;
}
@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: 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 (min-width: 992px ) {
    .carousel-inner .active.left { left: -16.7%; }
    .carousel-inner .next        { left:  16.7%; }
    .carousel-inner .prev        { left: -16.7%; }
}
.carousel-inner > .item {
    -webkit-transition: 0.10s ease-in-out left;
    -moz-transition: 0.10s ease-in-out left;
    -o-transition: 0.10s ease-in-out left;
    transition: 0.10s ease-in-out left;
}

请注意CSS文件.carousel-inner中的最后一项调整幻灯片转换前的时间。

原始代码： https://www.w3schools.com/howto/howto_css_image_text.asp