jQuery Twitter Bootstrap 2 carousel - 像 jcarousel 一样一次显示一组缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9745746/
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
Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel
提问by user1275105
I would appreciate it if anyone can advice on how to modify Twitter Bootstrap 2 carousel in order to display a set of thumbnails at a time similar to this jquery plugin (jcarousel)
如果有人可以就如何修改 Twitter Bootstrap 2 carousel 以便一次显示一组缩略图提供类似于此 jquery 插件 (jcarousel) 的建议，我将不胜感激
http://sorgalla.com/projects/jcarousel/examples/static_simple.html
http://sorgalla.com/projects/jcarousel/examples/static_simple.html
Thanks
谢谢
回答by Andres Ilich
Currently there is no support for such an option on the Bootstrap Carousel and i wouldn't recommend you hack away at the script since that amounts to basically creating a new one, and when updated come around you might lose support but there are other ways that you can fake such a setup by using the .thumbnailsgroup that the bootstrap carries. You will just be limited to always giving the slider container a width, or a span class, like so:
目前，Bootstrap Carousel 上不支持这样的选项，我不建议您修改脚本，因为这基本上相当于创建一个新脚本，更新后您可能会失去支持，但还有其他方式您可以使用.thumbnails引导程序携带的组来伪造这样的设置。您将仅限于始终为滑块容器提供宽度或跨度类，如下所示：
HTML
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>
As you can see i nested a thumbnail group inside the itemdivs that the carousel slides, this way you can have a group of images slide and there is no need to modify the original script.
正如您所看到的，我item在轮播幻灯片的div 中嵌套了一个缩略图组，这样您就可以拥有一组图像幻灯片，而无需修改原始脚本。
Note *: Updated demo with multiple image sizes inside the carousel.
注意*：更新演示，在轮播中包含多种图像尺寸。
回答by MasterBee
@andres-ilich first off this was a great answer, and you got me thinking about the jCarousel like feature and how the Twitter Bootstrap (TB) carousel would have to be hacked ( which is not ideal ). I completey agree with you and not a fan of messing with core framework overrides, but decided to see if there was a safe way to potentially "extend" the Carousel to deal with a per-item scroll like jCarousel.
@andres-ilich 首先这是一个很好的答案，你让我想到了类似 jCarousel 的功能以及 Twitter Bootstrap (TB) 轮播将如何被黑客攻击（这并不理想）。我完全同意你的看法，而不是搞乱核心框架覆盖的粉丝，但决定看看是否有一种安全的方法来潜在地“扩展”Carousel 以处理像 jCarousel 这样的每项滚动。
Here is my rationale:
这是我的理由：
- I assumed that all the items are located in the first
.itemof the carousel. Since TB has it own logic and core functions about moving from item to item, I needed more granular control of the logic but do not want to wrestle or override the internals of the carousel. So I kept the carousel only at one item to prevent having to trap or override any of the events/code for TB carousel since they would never fire (motion wise that is). - Used .prototype lightly and only to add a custom event to next/prev that I used to bind my custom logic later. The prototype clones the TB method first adds an $.trigger to the TB carousel next/prev and then executes the original TB carousel logic. This safeguards my logic to withstand future releases of TB (hopefully)
- Created a class called .jcarousel to allow for unique targeting of this type of carousel so that we do not interfere with other carousels on the page that would be leveraging the normal TB carousel functionality.
- 我假设所有项目都位于
.item旋转木马的第一个。由于 TB 有自己的逻辑和关于从项目移动到项目的核心功能，我需要对逻辑进行更细粒度的控制，但不想纠结或覆盖轮播的内部。因此，我将轮播仅保留在一个项目上，以防止必须捕获或覆盖 TB 轮播的任何事件/代码，因为它们永远不会触发（即运动明智）。 - 轻轻地使用 .prototype 并且只将自定义事件添加到 next/prev ，我稍后用于绑定我的自定义逻辑。原型克隆TB方法首先在TB轮播next/prev中添加$.trigger，然后执行原TB轮播逻辑。这保护了我的逻辑以承受未来版本的 TB（希望如此）
- 创建了一个名为 .jcarousel 的类，以允许对这种类型的轮播进行唯一定位，这样我们就不会干扰页面上将利用正常 TB 轮播功能的其他轮播。
I commented the best I could in my code since I am enjoying a latte at starbucks while I was doing this, and I sure there is room for improvement since this was a literally an early morning waiting for the bus type of answer to this.
我在我的代码中做了最好的评论，因为我在做这件事时正在星巴克享用拿铁咖啡，而且我确信还有改进的空间，因为这实际上是一个清晨等待公共汽车类型的答案。
Hope this helps anyone that needs it. Loving Twitter Bootstrap! 2.1 is a great new release.
希望这可以帮助任何需要它的人。喜欢 Twitter Bootstrap！2.1 是一个很棒的新版本。
Here is the jsFiddle Demo jCarousel - Per Item extension
这是 jsFiddle 演示jCarousel - Per Item 扩展
回答by isapir
See this excellent blog post on customizing the Bootstrap Carousel:
请参阅有关自定义 Bootstrap Carousel 的优秀博客文章：
