JSFiddle - React, Tailwind, and code Playground

by shubh1976

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div id="Carousel" class="carousel slide">
      <ol class="carousel-indicators">
        <li data-target="#Carousel" data-slide-to="0" class="active"></li>
        <li data-target="#Carousel" data-slide-to="1"></li>
        <li data-target="#Carousel" data-slide-to="2"></li>
      </ol>
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item active">
        <div class="aspect"><a href="#"><img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=6" class="img-responsive"></a></div>
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=7" class="img-responsive"></a></div>
        </div>
        <div class="item">
          <div class="aspect"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=8" class="img-responsive"></a></div>
           <div class="aspect"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=9" class="img-responsive"></a></div>
            <div class="aspect"><a href="#"><img...

CSS

body {
  padding-top: 20px;
}

.carousel {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
}

.aspect {
  width: calc(100%/7 - 10px) !important;
  padding: 0 5px;
  float: left;
}

/* The controlsy */

.carousel-control {
  left: -12px;
  height: 40px;
  width: 40px;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  margin-top: 90px;
}

.carousel-control.right {
  right: -12px;
}

/* The indicators */

.carousel-indicators {
  right: 50%;
  top: auto;
  bottom: -10px;
  margin-right: -19px;
}

/* The colour of the indicators */

.carousel-indicators li {
  background: #cecece;
}

.carousel-indicators .active {
  background: #428bca;
}

JavaScript

$(document).ready(function() {
	  $('#Carousel').carousel({
	    interval: 2000
	  })
	});

	$(window).ready(function() {
	 
	});