Bootstrap 3.0 中带有缩略图的轮播

Posted 2023-02-16

【中文标题】Bootstrap 3.0 中带有缩略图的轮播

【英文标题】：Carousel with Thumbnails in Bootstrap 3.0

【发布时间】：2013-09-21 21:45:13

【问题描述】：

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

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

【问题讨论】：

我可以在 html 中获得一个工作示例吗？所有链接都已损坏。提前致谢。

【参考方案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

【讨论】：

很好的例子，但是......我怎样才能让它响应？

它是响应式的.. 你想要它是全宽的吗？还是根据不同的显示器/设备改变布局？

如果您将窗口最小化，下面列出的元素就是问题所在。

@ZimSystem 当 prev 和 next 是单击时，我希望滑动一次只能移动一个缩略图（不是全部 4 个），我该怎么做？

【参考方案2】：

@Skelly 的回答是正确的。它不会让我添加评论（

col-xs-3 

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

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

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

【参考方案3】：

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

http://flexslider.woothemes.com/

问候

【讨论】：

虽然我喜欢 flexslider，但问题是专门针对 Bootstrap 3 的。

不幸的是它是根据 GPL 授权的

【参考方案4】：

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

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

【讨论】：

看我做了非常相似的事情。但是我有一个问题，即使滑块中的图像根本不显示。轮播中的主图像出现并在列表中不断循环，没有问题，但缩略图永远不会出现。需要注意的是，我尝试显示超过 100 张图片，所以我不确定这是否会导致任何问题。