JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class='row'>
	<div class='col-xs-12'>
		<div class="carousel slide media-carousel" id="media">
			<div class="carousel-inner">
				<div class="item  active">
					<div class="row">
						<div class="col-xs-3">
							<a class="thumbnail" href="#">First</a>
						</div>          
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Second</a>
						</div>
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Third</a>
						</div>   
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Fourth</a>
						</div>    			   
					</div>
				</div>
				
				<div class="item">
					<div class="row">
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Fifth</a>
						</div>          
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Sixth</a>
						</div>
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Seventh</a>
						</div>
						<div class="col-xs-3">
							<a class="thumbnail" href="#">Eight</a>
						</div>			  
					</div>
				</div> 
			</div>
			<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
			<a data-slide="next" href="#media" class="right carousel-control">›</a>
		</div>                          
	</div>
</div>

CSS

.media-carousel 
      {
        margin-bottom: 0;
        padding: 0 40px 30px 40px;
        margin-top: 30px;
      }
      /* Previous button  */
    .media-carousel .carousel-control.left 
      {
        left: -12px;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        height: 40px;
        width : 40px;
        margin-top: 14px
      }
      /* Next button  */
    .media-carousel .carousel-control.right 
      {
        right: -12px !important;
        background-image: none;
        background: none repeat scroll 0 0 #222222;
        border: 4px solid #FFFFFF;
        border-radius: 23px 23px 23px 23px;
        height: 40px;
        width : 40px;
        margin-top: 14px
      }
      /* Changes the position of the indicators */
    .media-carousel .carousel-indicators 
      {
        right: 50%;
        top: auto;
        bottom: 0px;
        margin-right: -19px;
      }
      /* Changes the colour of the indicators */
    .media-carousel .carousel-indicators li 
      {
        background: #c0c0c0;
      }
    .media-carousel .carousel-indicators .active 
      {
        background: #333333;
      }
    .media-carousel img
      {
        width: 250px;
        height: 100px
      }

    .thumbnail 
      {
        display: block;
        padding: 4px;
        margin-bottom: 20px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #3498db;
        border-radius: 4px;
      }

      .carousel-inner a:hover 
        {
          color: white;
          text-decoration: none;
          background-color: #3498db;
        }

       a.thumbnail:focus 
        {
          border-color: #337ab7;
          background-color: #3498db;
          color: white;
          text-decoration: none;
        }

JavaScript

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});