2016-06-10 5 views
0

Also habe ich ein Karussell, das 4 Raster anzeigt, ich möchte es nur 1 Gitter (Col-sm-12) auf mobilen Geräten zeigen, jeder weiß, wie ich dies mit Jquery erreichen konnte oder CSS?Bootstrap Karussell Anzeige 1 Spalte auf Haltepunkt

Derzeit ist es Listing 4 Gitter nur an col-sm-12, ich will es 1 Raster bei col-sm-12 zeigen:

<div class="carousel slide" id="myCarousel"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <ul class="thumbnails"> 
       <li class="col-md-3 col-sm-12"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/260x180" alt=""> 
        </div> 
        <div class="caption"> 
         <h5>Arrival Dec, 2013</h5> 
        </div> 
       </li> 
       <li class="col-md-3 col-sm-12"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/260x180" alt=""> 
        </div> 
        <div class="caption"> 
         <h5>Arrival, November, 2013</h5> 
        </div> 
       </li> 
       <li class="col-md-3 col-sm-12"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/260x180" alt=""> 
        </div> 
        <div class="caption"> 
         <h5>Arrival Feb, 2014, ON</h5> 
        </div> 
       </li> 
       <li class="col-md-3 col-sm-12"> 
        <div class="thumbnail"> 
         <img src="http://placehold.it/260x180" alt=""> 
        </div> 
        <div class="caption"> 
         <h5>Arrival March 2014, ON</h5> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 

Antwort

1

Dies wurde vor gefragt: Responsive bootstrap carousel multiple columns in item

Sie kann entweder CSS/jQuery wie show in diesem bootply verwenden: http://www.bootply.com/dMnK7SqFrr. Oder erstellen Sie zwei Karussells und zeigen Sie diese je nach Displaygröße an.

Ich hatte kürzlich eine ähnliche Anforderung, und nachdem ich eine erste Implementierung basierend auf obigen Beispielen versucht hatte, entschied ich mich für Slick. Es ist dafür gemacht, reaktionsschnell zu sein.