Отзывчивая twitter bootstrap карусели с несколькими элементами

Question

У меня есть карусель с бутстрапом twitter с 3 элементами на строке. Пример: here. Как я могу реагировать? Я хочу отобразить один элемент для мобильных устройств.

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <div class="col-xs-4"> 
       <a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"> 
        <a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"> 
       <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"> 
       <a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"> 
       <a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a> 
      </div> 
     </div> 
     <div class="item"> 
      <div class="col-xs-4"> 
       <a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a> 
      </div> 
     </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div> 

И

.carousel-inner .active.left { left: -33%;    } 
.carousel-inner .active.right { left: 33%;    } 
.carousel-inner .next   { left: 33%    } 
.carousel-inner .prev   { left: -33%    } 
.carousel-control.left  { background-image: none; } 
.carousel-control.right  { background-image: none; } 
.carousel-inner .item   { background: white;  } 

И

$('#myCarousel').carousel({ 
    interval: 10000 
}) 

$('.carousel .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    if (next.next().length>0) { 
     next.next().children(':first-child').clone().appendTo($(this)); 
    } 
    else { 
     $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 
}); 

Answer 1

Смотрите документацию Bootstrap grid system, там вы найдете правила, которые нужно решить вашу проблему.

Вы меняете первый «класс s к col-xs-12 col-md-4 или что-то подобное, а другой column» column класса s к hidden-xs hidden-sm col-md-4.

col-xs-12 будет отображать элементы со 100% на очень маленьком экране, и как только вы войдете на средний экран, col-md-4 сделает пункт 33.3 ..% от его ширины. hidden-xs и hidden-sm предотвратят отображение элементов на экранах xs и sm.

Вы измените разметку:

<div class="item active"> 
     <div class="row"> 
     <div class="col-xs-12 col-md-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> 
     <div class="hidden-xs hidden-sm col-md-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> 
     <div class="hidden-xs hidden-sm col-md-4"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div> 
     </div>  
    </div> 

и удалить этот CSS:

.carousel-inner .active.left { left: -33%;    } 
.carousel-inner .active.right { left: 33%;    } 
.carousel-inner .next   { left: 33%    } 
.carousel-inner .prev   { left: -33%    } 

также ваши копии Javascript ваши элементы, но, как вы нужны разные классы по колоннам вам нужно измените его, если вам это нужно.

EDIT: Думаю, я только что понял, что вы на самом деле хотите сделать, извините, что неправильно интерпретировал ранее.

Вот JSFiddle

Answer 2

Я нашел решение. Изменить col-xs-4 на col-md-4.

Затем изменить код яваскрипта к

$('#myCarousel').carousel({ 
    interval: 10000 
}) 
if($(window).width() >= 768){ 
$('.carousel .item').each(function(){ 
    var next = $(this).next(); 
    if (!next.length) { 
    next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    if (next.next().length>0) { 
    next.next().children(':first-child').clone().appendTo($(this)); 
    } 
    else { 
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 
}); 
} 

Когда ширина браузера больше или равна 768px, то он будет показывать три изображения подряд. Когда ширина меньше 768 пикселей, отображается только 1 изображение.

Link to my fiddle

в мобильных устройствах

в десктопных

ПРИМЕЧАНИЕ. Обновите браузер после изменения ширины каждый раз.

Надеется, что это поможет