jquery - Twitter bootstrap 旋转木马，里面有一个大元素和 5 个小缩略图

Question

所以基本上我需要实现的是:

一个显示 1 个元素的 bootstrap 图库，也滚动 1 个元素，但同时我们可以看到下一张图片或这张大图片下的上一张。我们看到 6 个小尺寸的缩略图随着大图像一起滑动。箭头应该放在所有东西的中间，而不仅仅是大图的中间。

我从默认的 bootstrap 轮播代码开始，但此时堆积如山。有什么解决办法吗？

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
                ...
            </div>
        </div>
        ...
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Answer 1

在这件事上花了几个小时后，我设法实现了 this我很高兴。

这是我的 html 代码:

<div style="width: 400px; margin: 0px auto;">

    <div id="myCarouselBig" class="carousel slide">

        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><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-12"><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-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarouselBig" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarouselBig" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div id="myCarousel" class="carousel slide">

        <div class="carousel-inner">
            <div class="item active">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><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-3" style="width: 20%;"><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-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
            </div>
            <div class="item">
                <div class="col-xs-3" style="width: 20%;"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev" style="display: none;">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" style="display: none;">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>

javascript 代码:

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

$('#myCarousel.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<3; i++) {

        next=next.next();

        if (!next.length) {
            next = $(this).siblings(':first');
        }

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

$('#myCarouselBig').on('slide.bs.carousel', function (event) {
    if (event.direction == 'left') $('#myCarousel').carousel('next');
    else {
        $('#myCarousel').carousel('prev');
        $('#myCarousel').carousel('pause');
    }
})

css 代码:

#myCarousel .carousel-inner > .next.left, #myCarousel .carousel-inner > .prev.right {
    left: 0 !important;
}

#myCarousel .carousel-inner .active.left  { left: -20%;             }
#myCarousel .carousel-inner .active.right { left: 20%;              }
#myCarousel .carousel-inner .next         { left: 20%               }
#myCarousel .carousel-inner .prev         { left: -20%              }
#myCarousel .carousel-control.left        { background-image: none; }
#myCarousel .carousel-control.right       { background-image: none; }
#myCarousel .carousel-inner .item         { background: white;      }

这是 jsfiddle code .

^{注意:该代码段包含 2 个 Bootstrap 轮播，一个带有大图像，另一个带有 5 个小缩略图。 2 个轮播链接在一起，这意味着每次您触发主轮播时，另一个轮播将向左或向右滑动。如您所知，bootstrap 不支持 5 列，但我做了一个 hack，为每张图片添加了 20% 的宽度，即使我首先在其上使用了 col-xs-3 类。在 css 中你可以找到一个 left: 0 !important 条件。这是我花了将近 3 个小时后发现的黑客女巫，没有它缩略图轮播效果会崩溃。另一个你不必错过的 hack 是像我在 css 中那样为元素添加背景颜色，因为在某些情况下图像可能看起来很奇怪，如果你的元素包含文本，那么文本可能看起来很粗。目前，如果你按下小图片，什么都不会发生，但我计划在接下来的几天内开发它，我可能也会用它来更新这段代码。}