2个不同的Bootstrap轮播共存

Question

我的问题是我想基于 Bootstrap 共存 2 个不同的轮播。

一个是简单的：

    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

        <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <img src="Images/pub.png">
            </div>
            <div class="item">
                <img src="Images/pub.png">
            </div>
            <div class="item">
                <img src="Images/pub.png">
            </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

另一个，一帧显示4个项目：

    <div class="carousel slide" id="myCarousel2">
        <div class="carousel-inner">
            <div class="item active">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
            <div class="item">
                <li class="col-lg-3">
                    <div class="center-block"></div>
                </li>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

myCarousel2 的行为就像你点击一个人字形，只有一个项目滑动：

$('#myCarousel2').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<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

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

这是第二个轮播的 css，它也使用了 Bootstrap 和一个修改版本：

    .carousel-inner .active.left { left: -25%; }
    .carousel-inner .next        { left:  25%; }
    .carousel-control.left,.carousel-control.right {background-image:none;}

这样做，第一个轮播就像第二个一样。我认为这是由 2 个轮播使用的引导程序类引起的冲突，因此我尝试通过为第一个轮播创建新的特定于但与引导程序具有相同属性的类来覆盖它们，但它失败了。

有人有想法吗？

谢谢！

Answer 1

我认为你没有正确选择第二个旋转木马...

引导层：http://www.bootply.com/nALoYV9bHB

CSS：

#myCarousel2 .carousel-inner .active.left { left: -25%; }
#myCarousel2 .carousel-inner .next        { left:  25%; }
#myCarousel2 .carousel-control.left,.carousel-control.right {background-image:none;}

JS：

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

  $('#myCarousel2.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<2;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

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