Bootstrap 3.3.7 多个项目轮播 - 推进所有项目而不是 1

Question

我一直在尝试向我的页面添加多个项目轮播。使用下面的代码时，动画应该前进 1 幅图像。相反，动画推进了一切。我已经尝试了多种 Stackoverflow 解决方案来修复它，但不幸的是它们在这种情况下似乎不起作用 - 是因为屏幕尺寸的原因吗？我想解决这个问题，让它根据屏幕尺寸前进 2、3 或 4，或者一次前进一个，但功能齐全。任何帮助将不胜感激！

$('.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));
}
});

HTML：

<div class="container">
<div class="row">
    <div class="col-xs-12 col-md-12 col-centered">
        <div id="carousel" class="carousel slide" data-ride="carousel" 
data-type="multi" data-interval="6500">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-col">
                        <div class="block img-responsive"><img 
style="width:100%" src="x"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col">
                        <div class="block img-responsive"><img 
style="width:100%" src="x"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col">
                        <div class="block img-responsive"><img 
style="width:100%" src="x"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col">
                        <div class="block img-responsive"><img 
style="width:100%" src="x"></div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-col">
                        <div class="block img-responsive"><img 
style="width:100%" src="x"></div>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <div class="left carousel-control">
                <a href="#carousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" 
aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
            </div>
            <div class="right carousel-control">
                <a href="#carousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" 
aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</div>

CSS

.col-centered {
float: none;
margin: 0 auto;
}

.carousel-control { 
width: 8%;
width: 0px;
}
.carousel-control.left,
.carousel-control.right { 
background-image: none !important;
opacity: 1;
}
.carousel-control > a > span {
color: white;
  font-size: 29px !important;
}

.carousel-col { 
position: relative; 
min-height: 1px; 
padding: 5px; 
float: left;
}

 .active > div { display:none; }
 .active > div:first-child { display:block; }

/*xs*/
@media (max-width: 767px) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .active.right { left: 50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev            { left: -50%; }
.carousel-col                { width: 50%; }
.active > div:first-child + div { display:block; }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .active.right { left: 50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev            { left: -50%; }
.carousel-col                { width: 50%; }
.active > div:first-child + div { display:block; }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev            { left: -33%; }
.carousel-col                { width: 33%; }
.active > div:first-child + div { display:block; }
.active > div:first-child + div + div { display:block; }
}

/*lg*/
@media (min-width: 1200px) {
.carousel-inner .active.left { left: -25%; }
.carousel-inner .active.right{ left:  25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev            { left: -25%; }
.carousel-col                { width: 25%; }
.active > div:first-child + div { display:block; }
.active > div:first-child + div + div { display:block; }
.active > div:first-child + div + div + div { display:block; }
}

注意：将以下代码添加到 css 并不能解决问题。我使用 Bootstrap CDN。

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  left: 0;
  -webkit-transform: translate3d(33%, 0, 0);
  -ms-transform: translate3d(33%, 0, 0);
  -o-transform: translate3d(33%, 0, 0);
  transform: translate3d(33%, 0, 0);
}


.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  left: 0;
  -webkit-transform: translate3d(-33%, 0, 0);
  -ms-transform: translate3d(-33%, 0, 0);
  -o-transform: translate3d(-33%, 0, 0);
  transform: translate3d(-33%, 0, 0);
}

Answer 1

将 33% 和 -33% 替换为 25%，这可能会对您有所帮助，谢谢。