引导缩略图滑块:基于屏幕显示图像数量

Question

我已经创建了一个引导图像缩略图滑块，我在滑块中显示正常屏幕大小的四个图像。

演示网址：

现在，我只想在小屏幕上的缩略图滑块中显示一个图像。

​

​

​

​

，请告诉我，我是一只新蜜蜂，喜欢响应性的设计。。

我的代码：

<div class="container">

  <div class="span8">

    <h1>Bootstrap Thumbnail Slider</h1>

    <div class="well">

    <div id="myCarousel" class="carousel slide">

    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Carousel items -->
    <div class="carousel-inner">

    <div class="item active">
        <div class="row-fluid">
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
          <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </div><!--/item-->

    <div class="item">
        <div class="row-fluid">
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
            <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a></div>
        </div><!--/row-fluid-->
    </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-->

    </div><!--/well-->
  </div>
</div>

Answer 1

我不相信单靠CSS就能实现这个解决方案。因为旋转木马的幻灯片是类" item "，当这个幻灯片转到一个小屏幕时，它仍然会有3个项目幻灯片，但是每个幻灯片中有4个垂直堆叠的缩略图(每张幻灯片的span3内容都会被引导响应类堆叠)。然而，有两个解决办法。

选项1-更简单的

有两个旋转木马。一个是您展示的，另一个省略了行流和项目包装，并将项目放在每个span3上。你的原版得到了“隐藏电话”类，而新的则得到了“可视电话”类。此外，您还需要省略手机版本上的幻灯片指示器，以减少许多项目的混乱。下面我已经包括了一个链接到jsfiddle的例子。只需将中间的垂直帧分隔符移动到右边，将大小调整到电话宽度(反之亦然)。

http://jsfiddle.net/guydog28/tEKg8/

选项2-更硬的

第二个选择要困难得多。如果你必须只有一个旋转木马，你必须点击窗口调整大小事件，看看你现在的手机大小或以上的手机大小。然后，您实际上需要操作DOM，使您的旋转木马看起来像两个旋转木马，然后再重新调整窗口大小。所以javascript看起来应该是这样的：

$(document).ready(function () {
    //start the carousel
    $(".carousel").carousel();

    //bind to window resize event to see if we've toggled 
    //between phone and larger
    $(window).resize(function () {
        if ($(window).width() < 768) {
          //Phone size, manipulate DOM for phone here
        } else {
          //Not phone size, re-manipulate DOM to get back to original carousel
        }
        //Re-init carousel
        $(".carousel").carousel();
    });
});