JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
	<div id="welcome">
	
		<div class="carousel slide" id="main-carousel">

			<!-- items -->
			<div class="carousel-inner">
				<div class="active item">
					<img src="http://placehold.it/300x400/444&text=Item 1" />
					<div class="text-stuff">
						<div class="bubble">
						Stuff 1 
						</div>
					</div>
				</div>
				<div class="item">
				  	<img src="http://placehold.it/300x400/444&text=Item 2" />
				  	<div class="text-stuff">
						<div class="bubble">
						Stuff 2
						</div>
					</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/300x400/444&text=Item 3" />
					<div class="text-stuff">
						<div class="bubble">
						Stuff 3
						</div>
					</div>
				</div>
				<div class="item">
					<img src="http://placehold.it/300x400/444&text=Item 4" />
					<div class="text-stuff">
						<div class="bubble">
						Stuff 4
						</div>
					</div>
				</div>
				
				<div class="text-stuff-container">
					<ol class="carousel-indicators">
					  <li data-target="#main-carousel" data-slide-to="0" class="active"></li>
					  <li data-target="#main-carousel" data-slide-to="1"></li>
					  <li data-target="#main-carousel" data-slide-to="2"></li>
					  <li data-target="#main-carousel" data-slide-to="3"></li>
					</ol>
				</div>				
			</div>
			

			
			<!--
			<a data-slide="next" href="#main-carousel" class="right carousel-control">&raquo;</a>
			<a data-slide="prev" href="#main-carousel" class="left carousel-control">&laquo;</a>
			-->
			
		</div><!-- #main-carousel -->	
	

	</div><!-- /#welcome -->

CSS

#welcome {
	background-color:#fff;
	position: relative;
	top:80px;
	height:400px;
	overflow:hidden;
}

#main-carousel img{
	width:100%;
	height:100%;
}

#main-carousel .carousel-inner {
	padding:0;
	margin:0;
	height:400px;
	overflow:hidden;
}

#main-carousel .carousel-indicators {
	position:absolute !important;
	left:50%;
	bottom:0 !important;
	width:160px;
	margin-left:-10px;
	z-index:999;
}

#main-carousel .carousel-indicators li{
	background-color:#7CAC74;
}

#main-carousel .carousel-indicators .active {
    background-color: #593E79;
}

.carousel-linked-nav {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 170px;
  margin-bottom: 20px;   
}

#welcome .text-stuff {
	position: absolute;
	left:20%;
	top:10%;
	z-index:999;
	text-align:left;
	width:400px;
	height:185px;
}

#welcome .bubble {
	background-color:#7cac74;
	width:400px;
	padding:20px;
	font: 30px/36px "open sans" !important;
	font-weight:300 !important;
	color:#fff;	
	height:180px;
}

.carousel-stuff {
	height:400px;
	float:left;
}

#welcome .text-stuff-container {
	position: absolute;
	left:20%;
	top:30%;
	z-index:999;
	text-align:left;
	width:400px;
	height:220px;
}

JavaScript

/* SLIDE ON CLICK */ 

		$('.carousel-linked-nav > li > a').click(function() {

			// grab href, remove pound sign, convert to number
			var item = Number($(this).attr('href').substring(1));

			// slide to number -1 (account for zero indexing)
			$('#myCarousel').carousel(item - 1);

			// remove current active class
			$('.carousel-linked-nav .active').removeClass('active');

			// add active class to just clicked on item
			$(this).parent().addClass('active');

			// don't follow the link
			return false;
		});

		/* AUTOPLAY NAV HIGHLIGHT */

		// bind 'slid' function
		$('#main-arousel').bind('slid', function() {

			// remove active class
			$('.carousel-linked-nav .active').removeClass('active');

			// get index of currently active item
			var idx = $('#myCarousel .item.active').index();

			// select currently active item and add active class
			$('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

		});