Bootstrap 3.0 中的缩略图滑块答案

【问题标题】：Thumbnails Slider in Bootstrap 3.0Bootstrap 3.0 中的缩略图滑块
【发布时间】：2020-04-17 22:06:19
【问题描述】：

我需要制作 Bootstrap 3 缩略图滑块，如下图所示，它会一一滑动拇指。正如您已经知道的那样，网络上有一些示例，例如 this one，它正在使用 Bootstrap Carousel 并正在执行 BOX 滑动（一键滑动多个拇指）。但我需要一个一个地滑动拇指。

我该怎么做？

【问题讨论】：

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

看这个例子..

http://bootply.com/94452

.carousel-inner .active.left { left: -25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev        { left: -25%; }
.carousel-control            { width:  4%; }
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}

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

【讨论】：

非常感谢 Baghoo，这太棒了，您能否告诉我如何停止无限循环并在到达最后一个孩子时停止滑块？还是左起第一个孩子？再次感谢

【解决方案2】：

这是一次显示一张图像的示例，您可以一张一张地滚动它们。

            <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>

【讨论】：

您好 Skewled ，感谢您的回复，但这段代码并没有放出任何东西！你有机会测试它吗？谢谢

【解决方案3】：

这只是改变你的网格类的问题。

在.item .row 中，指定要放置的图像数量，并调整网格类。

Bootply Demo

结构应如下所示：

<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-->

【讨论】：