JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="5000" 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="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=2" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=3" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=4" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=5" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=6" 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>
           ...

CSS

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

JavaScript

/** Initialize bootstrap carousel **/
  function initBootstrapCarousel($) {

      $('.carousel[data-type="multi"] .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));
              next.children(':first-child').clone().appendTo($(this));
          }
      });
  }
  
  initBootstrapCarousel($);