css - Bootstrap thumbnail slider : Displaying number of images based on screen

Question

I have created a bootstrap image thumbnail slider.I am displaying four images in the slider in a normal screen size.

Demo url:

Now I want to display only one image in the thumbnail slider on the small screen as per responsive.

Please advice me.I am new bee to the responsive design.

My code:

<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">‹&lt;/a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">›&lt;/a>
    </div><!--/myCarousel-->

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

Answer 1

我不相信您可以仅通过 CSS 实现此解决方案。因为轮播的幻灯片是“项目”类，所以当它进入小屏幕时，它仍然有 3 个项目幻灯片，但每张幻灯片中有 4 个垂直堆叠的缩略图（每张幻灯片的 span3 内容与引导响应类堆叠在一起）。但是有两种解决方法。

选项 1 - 更简单

有两个旋转木马。一个是您显示的那个，另一个省略了 row-fluid 和 item 包装器，并将 item 放置在每个 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();
    });
});