Display Carousels In one Row on Small Devices

Question

Here is a sample bootstrap carousel from codepen and here's one from bootsnip. Most of them follow the typical HTMl structure like this.

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="img1.png" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="img2.png" class="img-responsive"></a></div>
    </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

These work fine on Desktops as they produce carousels like this:

But switch to Mobile devices and the carousel splits into multiple rows as shown here:

This is not my desired behavior as the very purpose of using a carousel is lost if images take up space in multiple rows.

On mobile devices I want only one product to show at a time (in a single row) and the subsequent products show on clicking the left or right carousel controls.

How do I do that ?

Answer 1

I agree with others, its better to use some other plugin for this functionality. I suggest owlcarousel2. If you want a bootstrap only solution here is an implementation.

HTML

<div class="carousel slide multi-carousel" data-ride="carousel" data-interval="3000" id="myCarousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=1" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=2" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=3" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=4" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=5" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=6" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=7" class="img-responsive"></a></div>
    </div>
    <div class="item">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><a href="#"><img src="http://placehold.it/800x400/000/fff?text=8" class="img-responsive"></a></div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>

CSS

.carousel-inner .active.left { left: -100%; }
.carousel-inner .next        { left:  100% ; }
.carousel-inner .prev        { left: -100% ; }
.active > div { display:none; }
.active > div:nth-child(1) { display:block; }

@media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
      }    
  }   

@media (min-width: 768px) {
    .carousel-inner .active.left { left: -50% ; }
    .carousel-inner .next        { left:  50% ; }
    .carousel-inner .prev        { left: -50% ; }
    .active > div { display:none; }
    .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(50%, 0, 0);
                transform: translate3d(50%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
                transform: translate3d(-50%, 0, 0);
      }    
  }   
} 

@media (min-width: 992px ) {
    .carousel-inner .active.left { left: -33% ; }
    .carousel-inner .next        { left:  33% ; }
    .carousel-inner .prev        { left: -33% ; }   
  .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }
  .active > div:nth-child(3) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(33.33%, 0, 0);
                transform: translate3d(33.33%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-33.33%, 0, 0);
                transform: translate3d(-33.33%, 0, 0);
      }    
  }      
}

@media (min-width: 1200px ) {
    .carousel-inner .active.left { left: -25% ; }
    .carousel-inner .next        { left:  25% ; }
    .carousel-inner .prev        { left: -25% ; }   
  .active > div:nth-child(1) { display:block; }
  .active > div:nth-child(2) { display:block; }
  .active > div:nth-child(3) { display:block; }
   .active > div:nth-child(4) { display:block; }

  @media all and (transform-3d), (-webkit-transform-3d) {  
      .carousel-inner > .item.next,
      .carousel-inner > .item.active.right {
        left: 0;
        -webkit-transform: translate3d(25%, 0, 0);
                transform: translate3d(25%, 0, 0);
      }
      .carousel-inner > .item.prev,
      .carousel-inner > .item.active.left {
        left: 0;
        -webkit-transform: translate3d(-25%, 0, 0);
                transform: translate3d(-25%, 0, 0);
      }    
  }      
}

JS

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

  for (var i=0;i<2;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});

codepen link.