Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
                <div id="slider" class="carousel slide col-xs-8" data-ride="carousel" data-interval="3000">
                    <ol class="carousel-indicators">
                        <li data-target="#slider" data-slide-to="0" class="active"></li>
                        <li data-target="#slider" data-slide-to="1" class=""></li>
                        <li data-target="#slider" data-slide-to="2" class=""></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item active">
                            <img alt="First slide" src="http://lorempixel.com/660/300/nature/3/">   
                        </div>
                        <div class="item">
                            <img alt="Second slide" src="http://lorempixel.com/660/300/nature/2/">  
                        </div>
                        <div class="item">
                            <img alt="Third slide" src="http://lorempixel.com/660/300/nature/5/">
                        </div>
                    </div>
                </div>

                <div id="slider_captions" class="col-xs-4">
                    <div>
                        <div id="caption-0" class="carousel-caption">
                            <h2>Title 1</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
                        </div>
                        <div id="caption-1" class="carousel-caption">
                            <h2>Title 2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
                        </div>
                        <div...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.carousel-caption {
			position: absolute;
			top: 0;
			text-align: left;
			left: inherit;
			right: inherit;
			width: 280px;
    color:#000;
}

.carousel-caption:not(#caption-0) {
    display: none;
}

JavaScript

$("#slider").on('slide.bs.carousel', function(evt) {

	   var step = $(evt.relatedTarget).index();

	   $('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
	   		$('#caption-'+step).fadeIn();
	   });

	});