Twitter Bootstrap 2 carousel - 像 jcarousel 一样一次显示一组缩略图

Question

如果有人能就如何修改 Twitter Bootstrap 2 轮播以便一次显示一组类似于此 jquery 插件 (jcarousel) 的缩略图提供建议，我将不胜感激

http://sorgalla.com/projects/jcarousel/examples/static_simple.html

谢谢

Answer 1

目前在 Bootstrap Carousel 上不支持这样的选项，我不建议你修改脚本，因为这基本上等于创建一个新的，当更新时你可能会失去支持，但有您可以通过使用引导程序携带的.thumbnails 组来伪造此类设置的其他方法。您将仅限于始终为滑块容器提供宽度或跨度类，如下所示：

HTML

<div class="carousel slide span8" id="myCarousel">
<div class="carousel-inner">
  <div class="item active">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
  <div class="item">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
  <div class="item">
        <ul class="thumbnails">
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
            <li class="span2">
                <div class="thumbnail">
                    <img src="http://placehold.it/260x180" alt="">
                </div>
            </li>
        </ul>
  </div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>

Demo，编辑here。

如您所见，我在轮播滑动的item div 中嵌套了一个缩略图组，这样您就可以滑动一组图像，而无需修改原始脚本。

注意^*：在轮播中更新了具有多种图像尺寸的演示。

Answer 2

@andres-ilich 首先这是一个很好的答案，您让我想到了类似 jCarousel 的功能以及 Twitter Bootstrap (TB) 轮播将如何被黑客入侵（这并不理想）。我完全同意你的看法，并不喜欢搞乱核心框架覆盖，但我决定看看是否有一种安全的方法可以潜在地“扩展”轮播来处理像 jCarousel 这样的逐项滚动。

这是我的理由：

• 我假设所有项目都位于轮播的第一个.item 中。由于 TB 有它自己的逻辑和关于从一个项目移动到另一个项目的核心功能，我需要对逻辑进行更精细的控制，但不希望与轮播的内部进行角力或覆盖。因此，我只将轮播保留在一个项目上，以防止不得不捕获或覆盖 TB 轮播的任何事件/代码，因为它们永远不会触发（即运动明智）。
• 使用 .prototype 轻而易举，仅将自定义事件添加到下一个/上一个我用于稍后绑定我的自定义逻辑的自定义事件。原型克隆 TB 方法首先在 TB carousel next/prev 中添加 $.trigger，然后执行原始 TB carousel 逻辑。这可以保护我的逻辑来承受未来的 TB 版本（希望如此）
• 创建了一个名为 .jcarousel 的类，以允许对此类轮播进行唯一定位，这样我们就不会干扰页面上将利用正常 TB 轮播功能的其他轮播。

我在我的代码中尽我所能评论，因为我正在星巴克享用拿铁咖啡，而我正在这样做，我确信还有改进的空间，因为这实际上是一个清晨等待巴士类型的答案这个。

希望这可以帮助任何需要它的人。喜欢 Twitter 引导程序！ 2.1 是一个很棒的新版本。

这里是 jsFiddle 演示 jCarousel - Per Item extension

Answer 3

请参阅这篇关于自定义引导轮播的精彩博文：

http://untame.net/2013/04/twitter-bootstrap-carousel/#part2

Answer 4

试试这个

问题：Twitter Bootstrap Vertical Thumbnail Carousel

GIT 里波。 ：https://github.com/tutorialdrive/Bootstrap-Vertical-Thumbnail-Carousel