Bootstrap 3.0中带有缩略图的轮播 [英] Carousel with Thumbnails in Bootstrap 3.0

问题描述

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

I need to make Bootstrap 3.0 Carousel to display a slide of thumbnails. How can I do this? This is an image of what I´m looking for:

这是Bootstrap 2的有效示例，但对于Bootstrap 3.0，我需要此示例。引导缩略图滑块

This is a working example for Bootstrap 2, but I need this for Bootstrap 3.0.: Bootstrap Thumbnail Slider

推荐答案

Bootstrap 4（2019年更新）

可以通过多种方式实现多项目轮播如此处所述。另一种选择是使用单独的缩略图浏览轮播幻灯片。

A multi-item carousel can be accomplished in several ways as explained here. Another option is to use separate thumbnails to navigate the carousel slides.

引导程序3（原始答案）

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

This can be done using the grid inside each carousel item.

       <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

Demo example thumbnail slider using the carousel:
http://www.bootply.com/81478

另一个带有轮播指标的示例缩略图：
http://www.bootply.com/79859

Another example with carousel indicators as thumbnails: http://www.bootply.com/79859

这篇关于Bootstrap 3.0中带有缩略图的轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！