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

时间：2014-06-29 08:23:07

标签： jquery css html5 twitter-bootstrap-3

我想要缩略图部分的下一个和上一个按钮，以便它可以在此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>

1 个答案:

答案 0 :(得分：2)

使用2个单独的轮播进行此操作相当简单。

Bootply Demo Here.

基本概念是你有2个独立的旋转木马：一个用于大图像，另一个用于拇指。拇指只是第二个旋转木马中的物品。诀窍是确保将拇指上的数据目标设置为第一个轮播的id。

我也设置了＆＃34;拇指＆＃34;旋转木马不能在它上面循环。如果你想让拇指旋转木马循环＆＃34;同步＆＃34;使用第一个旋转木马，你可以用一点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%;    
}

修改

SYNC选项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演示中，您将看到可以使用每个主旋转木马项目上的数据拇指设置缩略图目标。该数字表示拇指轮播中目标项的零基索引。例如：

<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);
相关问题
最新问题