引導縮略圖滑塊：根據屏幕顯示圖像數

Question

我已經創建了引導圖像縮略圖滑塊。我在滑塊中以正常屏幕大小顯示了四個圖像。

Demo url:

現在我想在小屏幕按響應上只顯示一個縮略圖滑塊圖像。

請指點我，我是新蜂的響應式設計。

我的代碼：

<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這種解決方案。因爲轉盤的幻燈片是類「項目」，所以當它轉到一個小屏幕時，它仍然會有3個項目幻燈片，但每個幻燈片中有4個垂直堆疊的縮略圖（每張幻燈片的span3內容都會與引導響應類）。但有兩種解決方法。

OPTION 1 - 更容易

有兩臺轉盤。一個是你已經顯示的那個，另一個是省略行流體和物品包裝，並將物品放置在每個span3上。您的原創課程獲得「隱藏電話」課程，新課程獲得「可見電話」課程。此外，您需要省略電話版本上的幻燈片指示器，以減少許多項目的混亂。下面我已經包含了一個jsfiddle示例的linke。只需將中間的垂直幀分隔符向右移動即可調整至手機寬度（反之亦然）。

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

選擇2 - HARDER

第二個選項是要困難得多。如果您必須只有一個輪播，則必須鍵入窗口調整大小事件，以查看您現在是手機大小還是手機大小以上。然後，您實際上將不得不操縱DOM，使您的輪播看起來像旋轉木馬2，然後再重新調整窗口大小。所以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(); 
    }); 
});