Twitter Bootstrap 2轮播-像jcarousel一样一次显示一组缩略图 [英] Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel

问题描述

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

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)

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

谢谢

推荐答案

当前在Bootstrap Carousel上不支持这种选项，我不建议您修改脚本，因为这基本上相当于创建了一个新的一种，当更新发布时，您可能会失去支持，但还有其他方法可以通过使用引导程序附带的.thumbnails组来伪造此类设置.您将被限制为始终为滑块容器指定宽度或跨度类，如下所示:

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 .thumbnails group that the bootstrap carries. You will just be limited to always giving the slider container a width, or a span class, like so:

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内嵌套了一个缩略图组，这样您就可以拥有一组图像滑动，而无需修改原始脚本.

As you can see i nested a thumbnail group inside the item divs that the carousel slides, this way you can have a group of images slide and there is no need to modify the original script.

注意 ^* :更新了演示，其中在轮播中具有多种图像尺寸.

Note ^*: Updated demo with multiple image sizes inside the carousel.

这篇关于Twitter Bootstrap 2轮播-像jcarousel一样一次显示一组缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！