Question

目标：让columns (6)中的多个bootstrap carousel一次滑动一列，然后转到circle。

HTML：

<div class="col-md-12 text-center">
    <h3>Bootstrap 3 Multiple Slide Carousel</h3>

</div>
<div class="col-md-6 col-md-offset-3">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a>

                </div>
            </div>
            <div class="item">
                <div class="col-xs-2">
                    <a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;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>

JS：

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

$('.carousel .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-inner .active.left {
    left: -16.6%;
}

.carousel-inner .next {
    left: 16.6%;
}

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

我已经设置了JSFIDDLE（来自此bootply的公然副本 - 这确实有效！）

我的问题是它一次滚动所有6列，但是在下一个循环中，它在开始时是正确的幻灯片。

我看不出自己在做什么，并且多年来一直盯着它。

欢迎任何建议.....请!!

Answer 1

似乎在bootstrap CSS版本之间处理carousal的方式有所不同，你使用的是bootstrap v3.3.5，而bootply上的示例有bootstrap v3.0.2。

我无法真正掌握两个文件之间的确切区别，但这里有工作fiddle。

Answer 2

我解决了这个问题。如果没有KAD的答案我就不会得到它，但更改版本号并不是我的选择。

我使用较少的文件并在via bower中引入了引导程序，并将所有单独的组件引入其不同的文件中，然后将它们全部添加到一个＆＃34; bootstrap.less＆＃34;文件使用@import。

我找到了carousel.less文件，找到了.carousel-inner类并将整个块复制到我自己的.less文件中，以便我可以覆盖组件。

所以这是我的新修改类，其中百分比为16.6％，之前都是100％。

In [17]: set(array_1).issubset(array_2)
Out[17]: True

我认为真正做到这一点的是在变换-3d部分，一旦我改变了它的工作原理。

当然，这只适用于6列旋转木马，这对我来说是正确的。因此，为了确保此样式仅应用于此特定轮播，我将整个事物包裹在滑块的id中，因此它只会影响这个。

希望这对其他人也有帮助。

Bootstrap Carousel多列一次滑动1个

2 个答案: