Geek Answers Handbook

Display carousels in one line on small devices

Here is an example bootstrap carousel from codepen and here is one of bootsnip . Most of them follow a 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>

They work great on desktop computers since they produce such carousels: enter image description here

But switch to mobile devices, and the carousel is broken into several lines, as shown below: enter image description here

This is not my desired behavior, since the very purpose of using the carousel is lost if the images occupy space on several lines.

On mobile devices, I want to show only one product at a time (in one line), and subsequent products are displayed when you press the left or right carousel.

How to do it?

+4
4

, . owlcarousel2. , .

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

.

+3

, Lightslider. , .

,

$(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
                  }
            }
        ]
    });  
});

Slick. , .

+1

bx-slider - ,

+1

Bootstrap ...

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

If you need to lay out 4 elements, treat the internal contents of each .item <div>as a mini-window ... so you need to create a responsive layout in it.

Also ... mobile phones will be sized up xs, so you want to use.col-xs-*

See JSFiddle for a working example.

+1
source

More articles:


All Articles