Question

基本上我需要实现的是：

bootstrap gallery

显示1个项目的一个自举图库，同时滚动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个引导程序轮播，一个带有大图像，另一个带有5个小缩略图。 2个转盘与链接相关联，意味着每次触发主旋转木马时，另一个将向左或向右滑动。正如你已经知道的那样，bootstrap不支持5个colums，但我做了一个黑客为每张图片添加了20％，即使我第一次使用了col-xs-3类。在css中你可以找到一个左：0！重要条件。这是一个黑客女巫，我花了差不多3个小时才发现，没有它，缩略图旋转木马效果会崩溃。你不必错过的另一个黑客就是像我在css中那样为项目添加背景颜色，因为在某些情况下，图像看起来很奇怪，如果你的项目包含的文字可能看起来很粗体。目前，如果您按下小图像，将不会发生任何事情，但我计划在接下来的几天内开发它，我也可能会更新此代码。}

Answer 2

您可以使用引导指南，该指南介绍如何制作滑块，并且有一个小点子菜单以及该指南，您可以将其更改为图像，而不是项目符号。

首先尝试自己，然后粘贴您的实际尝试。

Twitter引导程序轮播，里面有一个大项目和5个小缩略图

2 个答案: