SO carousel
SO carousel from http://www.pixedelic.com/plugins/camera/
HTML
<link rel="stylesheet" href="https://dl.dropbox.com/u/2665617/bootstrap/camera/camera.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://dl.dropbox.com/u/2665617/bootstrap/camera/jquery.mobile.customized.min.js"></script>
<script src="https://dl.dropbox.com/u/2665617/bootstrap/camera/jquery.easing.1.3.js"></script>
<script src="https://dl.dropbox.com/u/2665617/bootstrap/camera/camera.min.js"></script>
<div class="container">
<div class="row-fluid">
<div class="span12">
<p>Pagination circles with the height relative to the width</p>
<div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
<div data-thumb="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/thumbs/bridge.jpg" data-src="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/bridge.jpg">
<div class="camera_caption fadeFromBottom">
Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
</div>
</div>
<div data-thumb="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/thumbs/leaf.jpg" data-src="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/leaf.jpg">
<div class="camera_caption mosaicRandom">
It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
</div>
</div>
<div data-thumb="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/thumbs/road.jpg" data-src="https://dl.dropbox.com/u/2665617/bootstrap/camera/slides/road.jpg">
<div class="camera_caption fadeFromBottom">
<em>It's completely free</em> (even if a donation is appreciated)
</div>
</div>
<div...
CSS
#back_to_camera {
clear: both;
display: block;
height: 80px;
line-height: 40px;
padding: 20px;
}
/* CSS below is added to force thumnails in second example to display horizontally */
.camera_thumbs_cont ul{
width:100% !important;
}
.camera_thumbs_cont li
{
display: inline !important;
padding-right: 20px;
}
JavaScript
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: true
});
jQuery('#camera_wrap_2').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
});