twitter-bootstrap - Bootstrap 3.0 中带有缩略图的轮播

Question

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



这是 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>

使用轮播的演示示例缩略图 slider : http://www.bootply.com/81478

另一个使用轮播指示器作为缩略图的示例:
http://www.bootply.com/79859