JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
	<ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
	</ol>
	<div class="carousel-inner" role="listbox">
		<div class="item active">
			<h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4>
			<br>
			<span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span>
		</div>
		<div class="item">
			<h4>Director of the Human Genome Project discusses the greatest mystery of life</h4>
			<br>
			<span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span>
		</div>
	</div>

	<a href="" 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">&#171;</span>
	</a>
	<a href="" 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">&#187;</span>
	</a>
</div><!-- #myCarousel -->

CSS

body{background:#ccc;}
div{position:relative;}
.carousel-indicators{border-color:#53636f;top:100px;}
.carousel-inner{margin-top:30px;}
.carousel-control{position:relative;top:50px;}
a.left{float:left;text-align:left;font-size:2.3rem;}
a.right{float:right;text-align:right;font-size:2.3rem;}

JavaScript

$('.carousel-control').click(function(e){
	e.preventDefault();
	$('#myCarousel').carousel( $(this).data() );
});