Bootstrap - Responsive Carousel - Changing the number of visible slides

In this example, we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.

See the JSFIDDLE to see how this works. On a desktop, it rotates one item at a time and has 3 elements in view. If you shrink the browser to mobile you will not see it rotates one item at a time but only has one element in view (as opposed to it usually stacking 3 elements).

Here is the code you need from the example:-

HTML


<div class="row">
  <div class="col-md-12">
    <div class="carousel carousel-blog slide" id="carousel123">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

CSS


.carousel-blog .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-blog .carousel-control.left {
  margin-left: 15px;
}

.carousel-blog .carousel-control.right {
  margin-right: 15px;
}

.carousel-blog .cloneditem-1,
.carousel-blog .cloneditem-2,
.carousel-blog .cloneditem-3,
.carousel-blog .cloneditem-4,
.carousel-blog .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -33.333%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 33.333%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-1,
  .carousel-blog .carousel-inner .cloneditem-2 {
    display: block;
  }
}

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

@media all and (min-width: 992px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-3,
  .carousel-blog .carousel-inner .cloneditem-4,
  .carousel-blog .carousel-inner .cloneditem-5 {
    display: block;
  }
}

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

.container {
  margin-bottom: 50px;
}

body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

h2 {
  margin: 2em 0 1em;
}

.logo {
  margin: 20px auto;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 28px;
    float: left;
  }
}

.title {
  padding: 28px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

jQuery


(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({
    interval: 2000
  });
}());

(function() {
  $('.carousel-blog .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 3; i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
}());

If you need to modify the code to show more slides or change the breakpoints, just remember to update these four key elements:

Update the html classes for responsive rules
Update the css item widths
Add in the required .cloneditem-n management
Tweak the js loop to control the number of cloned items

WordPress / Web Development Tutorials
(Best WordPress Tutorials)