JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div id="myCarousel" class="carousel slide container">
<!-- Carousel items -->
<div class="carousel-inner">
<div id="story-1" class="active item row-fluid">
<a href="http://library.buffalo.edu/delivery">
<div class="span6">
<img class="img-featured " alt="delivery plus" src="http://library.buffalo.edu/img/featured-stories/delivery-plus.jpg">
</div>
<div class="story-text span6">
<small>FEATURED RESOURCE</small>
<h2><a href="http://library.buffalo.edu/delivery">Delivery+ <em>We'll Get It For You!</em></a></h2>
<ul>
<li>Materials retrieved and placed on hold at the UB library of your choice.
</li>
<li>Journal articles and book chapters delivered electronically.</li>
<li>Items delivered to faculty & staff departments.</li>
<li>Materials not available at UB requested from other libraries.</li>
</ul>
</div>
</a>
</div>
<div id="story-2" class="item row-fluid">
<div class="span6">
<img class="img-featured " alt="e pay" src="http://library.buffalo.edu/img/featured-stories/epay.jpg">
</div>
<div class="story-text span6">
<small>FEATURED RESOURCE</small>
<h2>Pay Overdue Fines Online with <em>ePay</em></h2>
<ul>
<li>Login to <a...
CSS
#myCarousel {
position: relative;
}
.img-featured {
width: 600px;
height: 300px;
}
#nav {
left: 0px;
position: absolute;
top: 23px;
}
JavaScript
$(function () {
$('.carousel').carousel();
$('.featured-th').on('click', 'a', function (e) {
e.preventDefault();
$('.carousel').carousel($(this).data('pagenumber'));
});
});