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

前端之家收集整理的这篇文章主要介绍了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中嵌套了一个缩略图组,旋转木马幻灯片,这样你可以有一组图像幻灯片,没有必要修改原来的脚本。

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

猜你在找的jQuery相关文章