正在寻找 BootStrap 3.0 轮播图片库

Question

有人知道 BS 3.0 的插件可以创建不使用灯箱的简单或最小缩略图驱动的幻灯片吗？响应式也是理想的。

我不是要重新发明轮子，但还没有找到任何东西，我有点匆忙。

看到了，Carousel with Thumbnails in Bootstrap 3.0

我不喜欢为伪造的缩略图重复相同的幻灯片是多么多余。

我不反对自己编写一个，我只是希望节省一些时间，如果有人已经制作了一个插件，我就可以利用它。

下面是我在想什么的照片。尺寸不相关。

如果没有人有任何东西，我会在抽出时间后分享我最终编码的内容。

谢谢！

Answer 1

这个 Bootply 示例可能会有所帮助：http://www.bootply.com/79859

            <!-- thumb navigation carousel items -->
          <ul class="list-inline">
          <li> <a id="carousel-selector-0" class="selected">
            <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-1">
            <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-2">
            <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-3">
            <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
          </a></li>
                <li> <a id="carousel-selector-4">
            <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-5">
            <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-6">
            <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
          </a></li>
          <li> <a id="carousel-selector-7">
            <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
          </a></li>
            </ul>

    </div>


    <!-- main slider carousel -->
    <div class="row">
        <div class="col-md-12" id="slider">

                <div class="col-md-12" id="carousel-bounding-box">
                    <div id="myCarousel" class="carousel slide">
                        <!-- main slider carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" data-slide-number="0">
                                <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="1">
                              <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="2">
                                <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="3">
                                <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="4">
                                <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="5">
                                <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="6">
                                <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
                            </div>
                            <div class="item" data-slide-number="7">
                                <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
                            </div>
                        </div>
                        <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>

                        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
                    </div>
                </div>

        </div>
    </div>
    <!--/main slider carousel-->

</div>

正在寻找 BootStrap 3.0 轮播图片库

Looking for a BootStrap 3.0 carousel photo gallery

jquery

carousel

twitter-bootstrap