JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="span8">
<h1>Bootstrap Thumbnail Slider</h1>
<div class="well">
<div id="myCarousel" class="carousel slide hidden-phone">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item">
<div class="row-fluid">
<div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250"...
CSS
item{
border-radius: 50%;
}
JavaScript
$(document).ready(function () {
$(".carousel").carousel();
$(window).resize(function () {
$(".carousel").carousel();
});
});