css - 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 个旋转木马使用的 Bootstrap 类引起的冲突，所以我试图通过创建特定于第一个旋转木马的新类来覆盖它们，但具有与 Bootstrap 相同的属性，但它失败了。

有人有想法吗？

谢谢!

Answer 1

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

Bootstrap :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));
        }
    });