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相同的属性，并且它失败了。

有人有想法吗？

谢谢！

Answer 1

我认为你没有正确选择第二个转盘...

Bootply ：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));
        }
    });

共存2个不同的Bootstrap轮播

1 个答案: