Имеется сетка, как при экране для мобильных сделать карусель, а не выстраивать в одну колонку?
<div class="container">
<div class="row" id="couresel">
<div class="col-md-4">
<div class="kartinka">
<img src="">
</div>
<div class="col-md-4">
<div class="kartinka">
<img src="">
</div>
</div>
<div class="col-md-4">
<div class="kartinka">
<img src="">
</div>
</div>
</div>
Я нашел такой выход:
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:4500});
}
else{
carousel.className = 'row';
for(var i = 0; i < length; i++){
children[i].className += 'col-md-4';
}
}
}
но у меня возникла проблема, он class="kartinka"
заменяет на col-md-4
, а надо чтобы было class="kartinka col-md-4"
, как так сделать?