CODEWITHSUNDEEP
twitter-bootstrap
bhaskarc
bhaskarc

Reputation: 9521

Display Carousels In one Row on Small Devices

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: enter image description here

But switch to Mobile devices and the carousel splits into multiple rows as shown here: enter image description 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 ?

Upvotes: 5

Views: 5366

Answers (4)

tmg
tmg

Reputation: 20383

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.

Upvotes: 5

user1575941
user1575941

Reputation:

The Carousel in Bootstrap is in itself not responsive...

If you need a responsive slider then you need to add on ... something like Slick (mentioned by @miquelarranz) will do.

If you need to lay out 4 items then treat the inner content of each .item <div> like a mini window... thus in it you need to create a responsive layout.

Also... mobiles will size to xs so you want to use .col-xs-*

See this JSFiddle for a working example.

Upvotes: 1

miquelarranz
miquelarranz

Reputation: 894

You can use an existing carrousel library like Lightslider. I think that it will fit your requirements.

Look at the first example, it gives support for responsiveness

$(document).ready(function() {
    $('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });  
});

Another alternative would be Slick. I have used it in some of my projects and it works like a charm.

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

bx-slider is another option - that allows single images on small viewports

Upvotes: 1

Related Questions