SO carousel

SO carousel from http://www.pixedelic.com/plugins/camera/

by panchroma

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 fadeFromBottom">
                    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;
		}

/* li.camera_visThumb{
  float:left;
  border:solid 2px red;
} */

.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
			});
		});