Bootstrap 3.0 中带有缩略图的轮播

Question

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

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

Answer 1

引导程序 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 的回答是正确的。它不会让我添加评论（

col-xs-3 

对每个缩略图进行分类，如下所示：

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

那么当它缩小到手机宽度时，它应该保持你想要的样子。

Answer 3

刚刚发现了一个很棒的插件：

http://flexslider.woothemes.com/

问候

Answer 4

1. 使用轮播的指示器显示缩略图。
2. 使用 CSS 将缩略图定位在主轮播之外。
3. 将指示器的最大高度设置为不大于缩略图。
4. 每当轮播滑动时，更新指示器的位置，将活动指示器定位在指示器的中间。

我在我的网站上使用它（例如 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;