There is a grid, like with a mobile screen, to make a carousel, and not to line up in one column?

<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>

I found this solution:

  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'; } } }

but I had a problem, it replaces col-md-4 class="kartinka" , but it is necessary that it be class="kartinka col-md-4" , how to do it?

  • in this case, divas should not line up in one column. They should be in one line. - Grundy
  • at a screen resolution of <768 they line up in one column - Mitka Kozlov

1 answer 1

Well, add in the script children[i].className += 'kartinka col-md-4';