В мобильной версии блоки с изображениями превращаются в карусель на Bootstrap

@rmn · Регистрация: 14.05.2012

Author24 — интернет-сервис помощи студентам

Помогите решить задачку:

Верстка на Bootstrap.
В строке 2 изображения.

HTML5

<div class="container">
   <div class="row">
      <div class="col-md-6">
         <img src="img-1.jpg"/>
      </div>
      <div class="col-md-6">
         <img src="img-1.jpg"/>
      </div>
   </div>
</div>

Надо чтобы при уменьшении ширины экрана до мобильной версии эти картинки превращались в карусель

HTML5

1	class="carousel slide"

, а не складывались друг под друга.

Подскажите способы решения или ссылку на похожее решение.
Спасибо!

@Shakalaka · 16.06.2015, 10:17

Есть 2 варианта:
1)геморный, но менее ресурсоемкий:
Добавить сразу в разметку нужные классы и в css через media queries перебивать значения этих классов в зависимости от разрешения.
2)простой, но более ресурсоемкий - javascript)
В css я ковыряться не хочу, так что вот пример

HTML5

<div class="container">
   <div class="row" id="carousel">
      <div class="col-md-6">
         <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQMShYhHyy6iUoFBfhoBwggU-srcnQ6LRR2hVOsgyUBfJscrKBXUg"/>
      </div>
      <div class="col-md-6">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSQ1SGBVDrea0npGpjfu5zxkVnTVcE68g4UY0k4lNG8uQ7VWQB0"/>
      </div>
   </div>
</div>

Javascript

window.onresize = changeLayout;
function changeLayout(){
    var carousel = document.getElementById('carousel');
    var children = carousel.getElementsByTagName('div');
    var length = children.length;
    var w = window.innerWidth;
    if(w < 600){
        carousel.className = 'carousel-inner';
        for(var i = 0; i < length; i++){
            if(i == 0){
                children[i].className = 'item active';
                continue;
            }
            children[i].className = 'item';
        }
        $('#carousel').carousel({interval:1500});
    }
    else{
        carousel.className = 'row'; 
        for(var i = 0; i < length; i++){
            children[i].className = 'col-md-6';        
        }
    }
}
changeLayout();

	16.06.2015, 10:17