jquery – Twitter Bootstrap 2 carousel – 一次显示一组缩略图像jcarousel

我将不胜感激，如果任何人可以建议如何修改Twitter Bootstrap 2 carousel为了显示一组缩略图一次类似于这个jquery插件(jcarousel)

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

谢谢

解决方法

目前没有支持这样的选项在Bootstrap Carousel和我不会建议你hack在脚本，因为这基本上创建一个新的，并且更新后，你可能会失去支持，但还有其他方法你可以通过使用引导程序运行的.thumbnails组来伪造这样的设置。你将只限于总是给slider容器一个宽度，或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>

Demo，edit here。

正如你可以看到，在项目div中嵌套了一个缩略图组，旋转木马幻灯片，这样你可以有一组图像幻灯片，没有必要修改原来的脚本。

注意：*在旋转木马中更新了多个图片大小的演示。

原文地址：https://www.jb51.cc/jquery/184118.html