如何在此 Bootstrap 产品滑块中为缩略图添加下一个上一个按钮？答案

【问题标题】：How to add next previous button for thumbnail in this Bootstrap Product Slider?如何在此 Bootstrap 产品滑块中为缩略图添加下一个上一个按钮？
【发布时间】：2014-08-21 14:51:37
【问题描述】：

我想为缩略图部分设置下一个和上一个按钮，以便它可以在此 Bootstrap 产品滑块中显示更多项目，仅显示几个缩略图并使用下一个和上一个导航到每个项目。

http://codepen.io/RetinaInc/details/FGjbH

这就是我尝试过的方法，但没有按我的意愿工作

<div class="row">
    <div class="col-sm-6">
       <h1>Products</h1>  
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img class ="img-responsive" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item">
                    <img class ="img-responsive" src="img/doubleRound/front_side.JPG">
                </div>
                <div class="item">
                    <img class ="img-responsive" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img  class ="img-responsive"src="img/doubleRound/top.JPG">
                </div>
            </div>

        </div> 
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">


        <div class="clearfix">
              <div class="carousel-link">
              <a class="left carousel-control" href="#carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                <div data-target="#carousel" data-slide-to="0" class="thumb"><img class ="img-responsive" src="img/doubleRound/all-parts.JPG"></div>
                <div data-target="#carousel" data-slide-to="1" class="thumb"><img class ="img-responsive" src="img/doubleRound/front_side.JPG"></div>
                <div data-target="#carousel" data-slide-to="2" class="thumb"><img class ="img-responsive" src="img/doubleRound/front.JPG"></div>
                <div data-target="#carousel" data-slide-to="3" class="thumb"><img class ="img-responsive" src="img/doubleRound/top.JPG"></div>

      <a class="right carousel-control" href="#carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

              </div>
            </div>

【问题讨论】：

标签： jquery css html twitter-bootstrap-3

【解决方案1】：

使用 2 个单独的轮播非常简单。

Bootply Demo Here.

基本概念是您有 2 个单独的轮播：一个用于大图像，第二个用于拇指。拇指只是第二个轮播中的项目。诀窍是确保将拇指上的数据目标设置为第一个轮播的 id。

我还将“拇指”轮播设置为不自行循环。如果你想让拇指轮播周期与第一个轮播“同步”，你可以用一点 js 来做到这一点。稍后我将尝试通过一个示例对其进行更新。

HTML：

<div class="container">
  <div class="row">
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/350x250/e8117f/fff&text=Product+Main">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+2">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+3">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+4">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/e8117f/fff&text=Product+Image+5">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/00ffff/000&text=Product+Image+6">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ff00ff/fff&text=Product+Image+7">
                </div>
                <div class="item">
                    <img src="http://placehold.it/350x250/ffff00/000&text=Product+Image+8">
                </div>
            </div>
        </div> 
    <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Main"></div>
                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+2"></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+3"></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+4"></div>
                </div><!-- /item -->
                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="http://placehold.it/100/e8117f/fff&text=Product+Image+5"></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="http://placehold.it/100/00ffff/000&text=Product+Image+6"></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="http://placehold.it/100/ff00ff/fff&text=Product+Image+7"></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="http://placehold.it/100/ffff00/000&text=Product+Image+8"></div>
                </div><!-- /item -->
            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <h2>Products</h2>
        <h3>Some product subhead</h3>
        <p>Product description goes here.  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
        <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>

    </div> <!-- /col-sm-6 -->
  </div> <!-- /row -->
</div> <!-- /container -->

CSS：

.item .thumb {
    width: 25%;
    cursor: pointer;
    float: left;
}
.item .thumb img {
    width: 100%;
    margin: 2px;
}
.item img {
    width: 100%;    
}

编辑：

同步选项 1： 为了使项目保持同步，您可以使用 jQuery 计算主轮播中有多少项目以及拇指轮播中有多少。然后使用它来计算拇指旋转木马内主旋转木马中活动幻灯片的位置。这取决于您的主图像和拇指图像的顺序相同：

(function($){
    $('#thumbcarousel').carousel(0);
    var $thumbItems = $('#thumbcarousel .item');
    var $items = $('#carousel .item');
    var numItems = $items.length; 
    var numThumbItems = $thumbItems.length; 
    var thumbGroup = Math.ceil(numItems/numThumbItems); 
    $('#carousel').on('slide.bs.carousel', function (event) {
        var curThumbIndex = $thumbItems.index($thumbItems.filter('.active').get(0));
        var activeSlideNum = $items.index(event.relatedTarget)+1;
        var thumbIndex = (Math.ceil(activeSlideNum/thumbGroup))-1;
        if (curThumbIndex>thumbIndex) {
            $('#thumbcarousel').one('slid.bs.carousel', function (event) {
                $('#thumbcarousel').carousel(thumbIndex);
            });
            if (curThumbIndex === ($thumbItems.length-1)) {
                $('#thumbcarousel').carousel('next');
            } else {
                $('#thumbcarousel').carousel(numThumbItems-1);
            }
        } else {
            $('#thumbcarousel').carousel(thumbIndex);
        }
    });
})(jQuery);

同步选项 2： 我还更新了 Bootply 演示，以稍微不同的方式完成此操作，但这种方法需要额外的标记。在 Bootply 演示中，您将看到可以在每个主要轮播项目上使用 data-thumb 设置拇指项目目标。该数字表示拇指轮播中目标项目的零基索引。例如：

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active" data-thumb="0">
            <img src="http://placehold.it/350x250/e8117f/fff&amp;text=Product+Main">
        </div>
        <div class="item" data-thumb="0">
            <img src="http://placehold.it/350x250/00ffff/000&amp;text=Product+Image+2">
        </div>
        <div class="item" data-thumb="0">
            <img src="http://placehold.it/350x250/ff00ff/fff&amp;text=Product+Image+3">
        </div>
        <div class="item" data-thumb="0">
            <img src="http://placehold.it/350x250/ffff00/000&amp;text=Product+Image+4">
        </div>
        <div class="item" data-thumb="1">
            <img src="http://placehold.it/350x250/7B1C8E/fff&amp;text=Product+Image+5">
        </div>
        <div class="item" data-thumb="1">
            <img src="http://placehold.it/350x250/9EF383/000&amp;text=Product+Image+6">
        </div>
        <div class="item" data-thumb="1">
            <img src="http://placehold.it/350x250/D64908/fff&amp;text=Product+Image+7">
        </div>
        <div class="item" data-thumb="1">
            <img src="http://placehold.it/350x250/E3A3A1/000&amp;text=Product+Image+8">
        </div>
    </div>
</div>

那么你可以改用这个脚本：

(function($){
    $('#thumbcarousel').carousel(0);
    var $thumbItems = $('#thumbcarousel .item');
    $('#carousel').on('slide.bs.carousel', function (event) {
       var $slide = $(event.relatedTarget);
       var thumbIndex = $slide.data('thumb');
       var curThumbIndex = $thumbItems.index($thumbItems.filter('.active').get(0));
        if (curThumbIndex>thumbIndex) {
            $('#thumbcarousel').one('slid.bs.carousel', function (event) {
                $('#thumbcarousel').carousel(thumbIndex);
            });
            if (curThumbIndex === ($thumbItems.length-1)) {
                $('#thumbcarousel').carousel('next');
            } else {
                $('#thumbcarousel').carousel(numThumbItems-1);
            }
        } else {
            $('#thumbcarousel').carousel(thumbIndex);
        }
    });
})(jQuery);

【讨论】：

非常感谢。我正在等待你的更新。我要同步。
是否有可能在大屏幕上的文本段落之后获得缩略图部分，但在小屏幕上的大轮播之后，像推拉一样？
当然，为什么不呢？它不依赖于包含的元素，因此将 #thumbcarousel 包装在它自己的 col 类中就可以了。然后，您可以根据需要使用 push/pull 类来获得所需的结果。
我还有什么要问的。我可以添加轮播标题 div 吗？我不能在新问题中问它，因为我不想被禁止。目前我的轮播标题在小屏幕上可见，但在桌面视图中不可见。我还希望标题位于轮播图像上的 div 上。提前谢谢你。