Twitter Bootstrap 2轮播 - 一次显示一组缩略图,如jcarousel

Question

我很感激,如果有人可以建议如何修改Twitter Bootstrap 2轮播,以便一次显示一组缩略图,类似于这个jquery插件(jcarousel)

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

谢谢

Answer 1

目前在Bootstrap Carousel上不支持这样的选项,我不建议你抄袭脚本,因为这相当于基本上创建了一个新的,当更新时你可能会失去支持但是还有其他方法可以你可以通过使用.thumbnailsbootstrap携带的组伪造这样的设置.您将仅限于为滑块容器提供宽度或span类,如下所示:

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>

演示,在这里编辑.

正如您所看到的,我item在旋转木马滑动的div中嵌套了一个缩略图组,这样您就可以滑动一组图像,而无需修改原始脚本.

注^*:更新了旋转木马内部多个图像尺寸的演示.

Answer 2

@ andres-ilich首先关闭这是一个很好的答案,你让我想到了jCarousel喜欢的功能以及Twitter Bootstrap(TB)旋转木马将如何被黑客攻击(这是不理想的).我完全同意你的意见,而不是搞乱核心框架覆盖,但决定是否有一种安全的方法可以"扩展"Carousel以处理像jCarousel这样的每项目滚动.

这是我的理由:

• 我假设所有物品都位于.item旋转木马的第一个位置.由于TB有自己的逻辑和核心功能关于从一个项目移动到另一个项目,我需要更精细的逻辑控制,但不想摔跤或覆盖旋转木马的内部.因此,我将旋转木马仅保留在一个项目上以防止必须捕获或覆盖TB旋转木马的任何事件/代码,因为它们永远不会发射(运动明智).
• 轻轻地使用.prototype并且仅将自定义事件添加到我之后用于绑定我的自定义逻辑的next/prev.原型克隆TB方法首先将$ .trigger添加到TB carousel next/prev,然后执行原始TB轮播逻辑.这可以保护我的逻辑,以抵御未来的结核病发布(希望如此)
• 创建了一个名为.jcarousel的类,以允许这种类型的轮播的唯一目标,这样我们就不会干扰页面上的其他轮播,这些轮播将利用正常的TB轮播功能.

我在我的代码中评论了最好的,因为我在星巴克享用拿铁咖啡时,我正在这样做,我确信还有改进的余地,因为这是一个字面上的清晨,等待总线类型的答案.

希望这可以帮助任何需要它的人.喜欢Twitter Bootstrap!2.1是一个很棒的新版本.

这是jsFiddle Demo jCarousel - Per Item扩展