CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapcarousel
Elaine Byene
Elaine Byene

Reputation: 4142

Show 1 item only in Bootstrap Multi Carousel in mobile

CODEPEN DEMO

I got this working but I couldn't figure out how to show only 1 item instead of 3 in the mobile screen.

I don't think this is a html/css issue but that of javascript. However, I can't figure out how to go about it being pretty weak in javascript. In the desktop, I would like to see 3 items as is now but in the mobile, I would like to show only 1 item at a time.

HTML

<div class="container">
  <h1>Use Bootstrap's carousel to show multiple items per slide.</h1>
  <div class="row">
    <div class="col-md-12">
      <div class="carousel slide multi-item-carousel" id="theCarousel">
        <div class="carousel-inner">
          <div class="item active">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
          </div>
          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>
          <!-- add  more items here -->
          <!-- Example item start:  -->

          <div class="item">
            <div class="col-sm-4 col-xs-12"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
          </div>

          <!--  Example item end -->
        </div>
        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

CSS

.multi-item-carousel .carousel-inner > .item {
  transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
  left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
  left: 33%;
}
.multi-item-carousel .carousel-inner .next {
  left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
  left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
    transition: 500ms ease-in-out all;
    backface-visibility: visible;
    transform: none !important;
  }
}
.multi-item-carousel .carouse-control.left, .multi-item-carousel .carouse-control.right {
  background-image: none;
}

jQuery:

// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

Upvotes: 0

Views: 4666

Answers (1)

Emmanuel
Emmanuel

Reputation: 10920

I'm not too sure I understand what you're trying to achieve in the JS code, but this is one way:

 $('.multi-item-carousel .item').each(function(){
// check the screen width
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
      // console.log(width);
      if (width > 960) { // do a conditional: if screen width greater than 960px for example
      //following code shows three images per slide
      //without it, its just one image per slide
         var next = $(this).next();
          if (!next.length) {
            next = $(this).siblings(':first');
          }
          next.children(':first-child').clone().appendTo($(this));
          
          if (next.next().length>0) {
            next.next().children(':first-child').clone().appendTo($(this));
          } else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
          } 
    }   
});

Your code doesn't make it too clear how or why exactly you're picking items from other slides and inserting them into a given slide. However, this code ensures one item per slide on mobile devices (specific screen widths)

The main take away from this is utilizing the window object to check widths and adjust your carousel code accordingly:

 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

CODEPEN

Upvotes: 1

Related Questions