JSFiddle - React, Tailwind, and code Playground

by shubh1976

HTML

<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>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"></a></div>
					</div>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div>
					</div>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div>
					</div>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"></a></div>
					</div>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div>
					</div>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/f477f4/fff&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>
					<div class="item">
					  <div class="aspect"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=9" class="img-responsive"></a></div>
					</div>
					<div...

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: false
    })
	});
	
	$(window).ready(function(){
		$('.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));
		}
		});	
	});