twitter-bootstrap Bootstrap 3.0 中带有缩略图的轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18850099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Carousel with Thumbnails in Bootstrap 3.0
提问by Martín
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 3.0 Carousel 来显示缩略图幻灯片。我怎样才能做到这一点？这是我正在寻找的图像：
This is a working example for Bootstrap 2, but I need this for Bootstrap 3.0.: Bootstrap Thumbnail Slider
这是 Bootstrap 2 的一个工作示例，但我需要它用于 Bootstrap 3.0。：Bootstrap Thumbnail Slider
回答by Zim
Bootstrap 4 (update 2019)
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.
多条传送带可以以多种方式来完成，如下解释。另一种选择是使用单独的缩略图来导航轮播幻灯片。
Bootstrap 3 (original answer)
Bootstrap 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>
Demo example thumbnail slider using the carousel:
http://www.bootply.com/81478
演示示例缩略图滑块使用轮播：http:
//www.bootply.com/81478
Another example with carousel indicators as thumbnails: http://www.bootply.com/79859
另一个使用轮播指示器作为缩略图的示例：http: //www.bootply.com/79859
回答by guydog28
@Skelly 's answer is correct. It won't let me add a comment (<50 rep)... but to answer your question on his answer: In the example he linked, if you add
@Skelly 的答案是正确的。它不会让我添加评论（<50 代表）......但要回答你关于他的回答的问题：在他链接的例子中，如果你添加
col-xs-3
class to each of the thumbnails, like this:
类到每个缩略图，像这样：
class="col-md-3 col-xs-3"
then it should stay the way you want it when sized down to phone width.
那么当它缩小到手机宽度时，它应该保持你想要的方式。
回答by rafamiranda
Just found out a great plugin for this:
刚刚为此找到了一个很棒的插件：
http://flexslider.woothemes.com/
http://flexslider.woothemes.com/
Regards
问候
回答by MastaBaba
- Use the carousel's indicators to display thumbnails.
- Position the thumbnails outside of the main carousel with CSS.
- Set the maximum height of the indicators to not be larger than the thumbnails.
- Whenever the carousel has slid, update the position of the indicators, positioning the active indicator in the middle of the indicators.
- 使用轮播的指示器显示缩略图。
- 使用 CSS 将缩略图放置在主轮播之外。
- 将指示器的最大高度设置为不大于缩略图。
- 每当转盘滑动时，更新指标的位置，将活动指标定位在指标的中间。
I'm using this on my site (for example here), but I'm using some extra stuff to do lazy loading, meaning extracting the code isn't as straightforward as I would like it to be for putting it in a fiddle.
我在我的网站上使用它（例如这里），但是我使用了一些额外的东西来进行延迟加载，这意味着提取代码并不像我希望将它放在小提琴中那样简单。
Also, my templating engine is smarty, but I'm sure you get the idea.
另外，我的模板引擎很聪明，但我相信你明白这个想法。
The meat...
这肉...
Updating the indicators:
更新指标：
<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>
Changing the CSS related to the indicators:
更改与指标相关的 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;
}
When the carousel has slid, update the list of thumbnails:
当轮播滑动时，更新缩略图列表：
$('#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;
});
And, when your page loads, set the initial scroll position of the thumbnails:
并且，当您的页面加载时，设置缩略图的初始滚动位置：
var indicatorPosition = 0;
