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

用25％代替33％和-33％，谢谢。

Bootstrap 3.3.7多项旋转木马 - 提前所有项目而不是1

1 个答案: