Jquery Bootstrap 3.0中的缩略图滑块

我需要使引导3缩略图滑块像下面的图像，幻灯片的拇指一个接一个。正如您已经知道的，在web上有一些示例，例如使用引导旋转木马并进行框滑动（一次单击滑动几个拇指）。但我需要一个接一个地滑动拇指

            <div id="carousel-home-one" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-home-one" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-home-one" data-slide-to="1"></li>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" style="background-color: #737373;">
              <div class="item active"><img src="imageonehere.jpg" alt="one" />
              </div>
                <div class="item"><img src="nextimagehere.jpg" alt="two" />
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-home-one" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-home-one" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

---

如何才能做到这一点？

这是一个一次显示一个图像的示例，您可以逐个滚动它们

            <div id="carousel-home-one" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#carousel-home-one" data-slide-to="0" class="active"></li>
              <li data-target="#carousel-home-one" data-slide-to="1"></li>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" style="background-color: #737373;">
              <div class="item active"><img src="imageonehere.jpg" alt="one" />
              </div>
                <div class="item"><img src="nextimagehere.jpg" alt="two" />
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-home-one" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#carousel-home-one" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>

只需更改网格类即可

在

.item.row

中，指定调整网格类后要放置的图像数

结构应如下所示：

<div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
   <div class="carousel-inner">
      <div class="item active">
         <div class="row">
            <!-- specify number of images by changing this grid class -->
            <div class="col-sm-12"><a href="#x"><img src="http://placehold.it/1000x500" alt="Image" class="img-responsive"></a>
            </div>
         </div>
         <!--/row-->
      </div>
      <div class="item">
         <div class="row">
            <div class="col-sm-12"><a href="#x"><img src="http://placehold.it/900x500" alt="Image" class="img-responsive"></a>
            </div>
         </div>
         <!--/row-->
      </div>
      <!--/item-->
   </div>
   <!--/carousel-inner--><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
   <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!--/myCarousel-->

参见此示例

---

它需要在旋转木马项目上进行一些自定义定位，并使用jQuery将活动项目加载到旋转木马中。

Hi Skewled，感谢您的回复，但此代码不会输出任何内容！你已经有机会测试了吗？谢谢，非常感谢，这太棒了，你能告诉我如何在到达最后一个孩子时停止无限循环和滑块吗？还是左边的第一个孩子？再次感谢