JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <div class="carousel slide multi-item-carousel" id="theCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/f44336/000000?text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/e91e63/000000?text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/9c27b0/000000?text=3" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/673ab7/000000?text=4" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/4caf50/000000?text=5" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <p>
              Title
            </p>
            <a href="#1"><img src="http://placehold.it/300/8bc34a/000000?text=6" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i...

CSS

.item > div > p {
  text-align: center;
}

.multi-item-carousel .carousel-inner > .item {
  -webkit-transition: 0.6s ease-in-out all;
  transition: 0.6s ease-in-out all;
}

.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%;
}

.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
  margin-top: 30px;
  background-image: none;
}

@media all and (transform-3d),
(-webkit-transform-3d) {
  .multi-item-carousel .carousel-inner > .item {
    -webkit-transition: 0.6s ease-in-out all;
    transition: 0.6s ease-in-out all;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-perspective: none;
    -webkit-transform: none!important;
    transform: none!important;
  }
}

JavaScript

$('#theCarousel').carousel({
  interval: false
})

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