JSFiddle - React, Tailwind, and code Playground

by pragya91

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
  
  <ul class="carousel-inner">
    <li class="item active">
      <a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a>
    </li>
    <li class="item">
      <a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a>
    </li>
    <li class="item">
      <a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a>
    </li>
    <li class="item">
      <a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a>
    </li>
    <li class="item">
      <a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a>
    </li>
    <li class="item">
      <a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a>
    </li>
  </ul>

  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

CSS

.carousel-inner{
  list-style-type:none;
}
.item{
  width:50px;
  height:50px;
}

.carousel{
  width:200px;
  height:60px
}
.carousel-inner .active.left  { left: -33%;             }
.carousel-inner .active.right { left: 33%;              }
.carousel-inner .next         { left: 33%               }
.carousel-inner .prev         { left: -33%              }
.carousel-control.left        { background-image: none; }
.carousel-control.right       { background-image: none; }
.carousel-inner .item         { background: pink;      }

JavaScript

$('#myCarousel').carousel({
  interval: 10000
});

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