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

查看：42
本文介绍了Bootstrap 3.0 中带有缩略图的轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

解决方案

Bootstrap 4(2019 年更新)

多项目轮播可以通过多种方式完成如解释这里.另一种选择是使用单独的缩略图来导航轮播幻灯片.

引导程序 3(原始答案)

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

 
<div class="col-sm-3">..

<div class="col-sm-3">..

<div class="col-sm-3">..

<!--/row-->

...添加更多项目

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

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

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:

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

解决方案

Bootstrap 4 (update 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.

Bootstrap 3 (original answer)

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>

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

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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆