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）旋转木马将如何被黑客攻击（这是不理想的）。我完全同意你的意见，而不是搞乱核心框架覆盖，但决定是否有一种安全的方法可以“扩展”Carousel以处理像jCarousel这样的每项目滚动。

这是我的理由：

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

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

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

这是jsFiddle演示jCarousel - Per Item extension

Answer 3

请参阅这篇关于自定义Bootstrap Carousel的优秀博客文章：

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

Answer 4

试试这个

问题：Twitter Bootstrap Vertical Thumbnail Carousel

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

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

4 个答案: