<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container-fluid">
<div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container-fluid">
<div class="row">
<div class="top col-md-6 col-xs-12"><img src="http://lorempixel.com/416/304/nature" class="img-responsive"></div>
<div class="content col-md-6 col-xs-12">
<h2>Slide 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, labore, magni illum nemo ipsum quod voluptates ab natus nulla possimus incidunt aut neque quaerat mollitia perspiciatis assumenda asperiores consequatur soluta.</p>
</div>
</div>
</div>
</div>
<!-- End Item -->
</div>
<a data-slide="prev" href="#custom_carousel" class="izq carousel-control">‹</a>
<a data-slide="next" href="#custom_carousel" class="der carousel-control">›</a>
<!-- End Carousel Inner -->
<div class="controls draggable ui-widget-content col-md-6 col-xs-12">
<ul class="nav ui-widget-header">
<li data-target="#custom_carousel" data-slide-to="0" class="active"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide One</small></a></li>
<li data-target="#custom_carousel" data-slide-to="1"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Two</small></a></li>
<li data-target="#custom_carousel" data-slide-to="2"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Three</small></a></li>
<li data-target="#custom_carousel" data-slide-to="3"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Four</small></a></li>
<li data-target="#custom_carousel" data-slide-to="4"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Five</small></a></li>
<li data-target="#custom_carousel" data-slide-to="5"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Six</small></a></li>
<li data-target="#custom_carousel" data-slide-to="6"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Six</small></a></li>
<li data-target="#custom_carousel" data-slide-to="7"><a href="#"><img src="http://lorempixel.com/416/304/nature"><small>Slide Six</small></a></li>
</ul>
</div>
</div>
<!-- End Carousel -->
</div>
#custom_carousel .item .top {
overflow:hidden;
max-height:300px;
margin-bottom:15px;
}
#custom_carousel .item {
color:#000;
background-color:#fff;
padding:20px 0;
overflow:hidden
}
#custom_carousel .item img{
width:100%;
height:auto
}
#custom_carousel .izq
{
position:absolute;
left: -25px;
top:40%;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px;
height: 40px;
width : 40px;
margin-top: 30px;
}
/* Next button */
#custom_carousel .der
{
position:absolute;
right: -25px !important;
top:40%;
left:inherit;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px;
height: 40px;
width : 40px;
margin-top: 30px;
}
#custom_carousel .controls{
overflow:hidden;
padding:0;
margin:0;
white-space: nowrap;
text-align: center;
position: relative;
background:#fff;
border:0;
}
#custom_carousel .controls .nav{
padding:0;
margin:0;
white-space: nowrap;
text-align: center;
position: relative;
background:#fff;
width: auto;
border: 0;
}
#custom_carousel .controls li {
transition: all .5s ease;
display: inline-block;
max-width: 100px;
height: 90px;
opacity:.5;
}
#custom_carousel .controls li a{
padding:0;
}
#custom_carousel .controls li img{
width:100%;
height:auto
}
#custom_carousel .controls li.active {
background-color:#fff;
opacity:1;
}
#custom_carousel .controls a small {
overflow:hidden;
display:block;
font-size:10px;
margin-top:5px;
font-weight:bold
}
$(document).ready(function(ev){
var items = $(".nav li").length;
var leftRight=0;
if(items>5){
leftRight=(items-5)*50*-1;
}
$('#custom_carousel').on('slide.bs.carousel', function (evt) {
$('#custom_carousel .controls li.active').removeClass('active');
$('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
})
$('.nav').draggable({
axis: "x",
stop: function() {
var ml = parseInt($(this).css('left'));
if(ml>0)
$(this).animate({left:"0px"});
if(ml<leftRight)
$(this).animate({left:leftRight+"px"});
}
});
});
