Question

我需要制作Bootstrap 3.0 Carousel以显示缩略图幻灯片。我怎样才能做到这一点？这是我正在寻找的图像：

Bootstrap 3.0 Carousel Thumbs

这是Bootstrap 2的一个工作示例，但我需要这个用于Bootstrap 3.0：Bootstrap Thumbnail Slider

Answer 1

Bootstrap 4（更新2019）

多项旋转木马可以通过多种方式完成as explained here。另一种选择是使用separate thumbnails to navigate the carousel slides。

Bootstrap 3（原始答案）

这可以使用每个轮播项目中的网格来完成。

       <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                            <div class="col-sm-3">..
                            </div>
                        </div>
                        <!--/row-->
                    </div>
                    ...add more item(s)
                 </div>
        </div>

使用轮播演示示例缩略图滑块：
http://www.bootply.com/81478

另一个以轮播指示符作为缩略图的示例： http://www.bootply.com/79859

Answer 2

@Skelly的回答是正确的。它不会让我添加评论（＆lt; 50 rep）...但是要回答你关于他答案的问题：在他链接的例子中，如果你添加

col-xs-3

每个缩略图的类，如下所示：

class="col-md-3 col-xs-3"

然后在尺寸缩小到手机宽度时，它应该保持你想要的方式。

Answer 3

刚刚找到了一个很棒的插件：

http://flexslider.woothemes.com/

此致

Answer 4

使用轮播指示符显示缩略图。
使用CSS将缩略图放在主旋转木马之外。
将指示器的最大高度设置为不大于缩略图。
每当转盘滑动时，更新指示器的位置，将活动指示器放在指示器的中间位置。

我在我的网站上使用此功能（例如here），但我使用了一些额外的东西来进行延迟加载，这意味着提取代码并不像以下那样直截了当我希望将它放在一个小提琴里。

另外，我的模板引擎是smarty，但我确定你明白了。

肉......

更新指标：

<ol class="carousel-indicators">
    {assign var='walker' value=0}
    {foreach from=$item["imagearray"] key="key" item="value"}
        <li data-target="#myCarousel" data-slide-to="{$walker}"{if $walker == 0} class="active"{/if}>
            <img src='http://farm{$value["farm"]}.static.flickr.com/{$value["server"]}/{$value["id"]}_{$value["secret"]}_s.jpg'>
        </li>

        {assign var='walker' value=1 + $walker}
    {/foreach}
</ol>

更改与指标相关的CSS：

.carousel-indicators {
    bottom:-50px;
    height: 36px;
    overflow-x: hidden;
    white-space: nowrap;
}

.carousel-indicators li {
    text-indent: 0;
    width: 34px !important;
    height: 34px !important;
    border-radius: 0;
}

.carousel-indicators li img {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

.carousel-indicators li:hover img, .carousel-indicators li.active img {
    opacity: 1;
}

.carousel-indicators .active {
    border-color: #337ab7;
}

当轮播已滑动时，请更新缩略图列表：

$('#myCarousel').on('slid.bs.carousel', function() {
    var widthEstimate = -1 * $(".carousel-indicators li:first").position().left + $(".carousel-indicators li:last").position().left + $(".carousel-indicators li:last").width(); 
    var newIndicatorPosition = $(".carousel-indicators li.active").position().left + $(".carousel-indicators li.active").width() / 2;
    var toScroll = newIndicatorPosition + indicatorPosition;
    var adjustedScroll = toScroll - ($(".carousel-indicators").width() / 2);
    if (adjustedScroll < 0)
        adjustedScroll = 0;

    if (adjustedScroll > widthEstimate - $(".carousel-indicators").width())
        adjustedScroll = widthEstimate - $(".carousel-indicators").width();

    $('.carousel-indicators').animate({ scrollLeft: adjustedScroll }, 800);

    indicatorPosition = adjustedScroll;
});

并且，当您的页面加载时，设置缩略图的初始滚动位置：

var indicatorPosition = 0;

在Bootstrap 3.0中使用缩略图的旋转木马

4 个答案: