<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 ---------->
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div id="thumbCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner thumb-inner">
<div class="active item">
<div class="col-xs-3 slide1">
<div class="caption">
<p>Quisque augue ex, faucibus sit amet porta sit amet, porttitor vel lectus. Sed at sem et nisl varius faucibus. Ut nisl neque, finibus a ultrices laoreet, porttitor a lorem. Aliquam condimentum maximus nulla sit amet egestas.</p>
<p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://placehold.it/250/f00/fff&text=1" alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 fade1">
<div class="caption">
<p>Cras vulputate lacinia diam in facilisis. Cras consequat massa interdum, euismod magna tincidunt, gravida diam. Vivamus neque lorem, faucibus vitae luctus accumsan, iaculis ac neque. Sed vel tincidunt felis. Donec scelerisque, nibh tincidunt rhoncus efficitur, velit</p>
<p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://placehold.it/250/f00/fff&text=2" alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 slide2">
<div class="caption">
<p>nisl eleifend orci, eget suscipit dui odio vitae purus. Nam vulputate, arcu id luctus malesuada, diam leo vehicula erat, ut pulvinar quam libero at quam. Maecenas congue pellentesque mattis. </p>
<p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://placehold.it/250/f00/fff&text=3" alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 fade2">
<div class="caption">
<p>Nulla non mauris nunc. In ultricies est dolor, ac iaculis nulla hendrerit quis. Praesent ornare leo non nunc accumsan cursus. Donec gravida posuere vestibulum. Cras sed rhoncus nisl. Mauris id nulla in dolor</p>
<p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://placehold.it/250/f00/fff&text=4" alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 slide3">
<div class="caption">
<p>dapibus blandit eget sed ligula. Pellentesque id vestibulum augue. Donec vehicula diam nunc, at molestie nisi hendrerit sollicitudin. Praesent feugiat congue rutrum. Fusce eleifend eu leo quis feugiat. Integer et tortor eget quam auctor vulputate. </p>
<p><a href="#" type="button" class="btn btn-primary">Learn more</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://placehold.it/250/f00/fff&text=5" alt="Demo Image">
</a>
</div>
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="right carousel-control" data-href="#thumbCarousel" data-target="#thumbCarousel" data-toggle="carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<a class="left carousel-control" data-href="#thumbCarousel" data-target="#thumbCarousel" data-toggle="carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
</div><!--/myCarousel-->
</div><!--/col-md-12-->
</div>
</div>
<script src="//soldierupdesigns.com/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$('.carousel .item').each(function()
{
var next = $(this).next();
if(!next.length)
{
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for(var i=0;i<2;i++)
{
next=next.next();
if (!next.length)
{
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
});
</script>
.carousel{
margin-bottom:10%;
}
.carousel-inner {
margin-bottom:10%;
}
.carousel-indicators {
position: absolute;
bottom: -15%;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
}
.carousel-indicators li {
display: inline-block;
width: 10px;
height: 10px;
margin: 1px;
text-indent: -999px;
cursor: pointer;
background-color: #fff \9;
background-color: rgba(255, 255, 255, 0);
border: 1px solid #ff0000;
border-radius: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin: 0;
background-color: #ff0000;
}
.carousel-control{
cursor:pointer;
}
.carousel-inner .active.left{
left: -25%;
}
.carousel-inner .next{
left:25%;
}
.carousel-inner .prev{
left:-25%;
}
.carousel-control{
width:4%;
}
.carousel-control.left{
margin-left:0;
background-image:none;
}
.carousel-control.right{
margin-right:0;
background-image:none;
}
.thumb-inner .thumb2-inner{
background:#fff;
}
/*Hide Carousel Controls until hover*/
.carousel .carousel-control{
display:none;
}
/*Display Carousel Controls on hover*/
.carousel:hover .carousel-control{
display:block;
}
.caption{
display:none;
position:absolute;
top:0;
left:5.5%;
right:2%;
bottom:0;
background:rgba(0, 0, 0, 0.65);
color:#fff !important;
margin-top:0;
z-index:1000;
padding-left:2%;
padding-right:2%;
text-align:center;
}
.caption p{
padding:2%;
}
.carousel > .thumb-inner{
width:90%;
position:relative;
left:0;
right:0;
margin:auto;
background:#000;
}
.thumb-carousel-navbar{
position:relative;
float:none;
margin:2% auto;
width:80%;
background:#444;
}
.thumb-carousel-navbar{
position:relative;
float:none;
margin:0 auto;
width:90%;
background:#444;
text-align:center;
}
.thumb-carousel-navbar a > img{
position:relative;
left:65%;
margin:0 auto;
float:none;
text-align:center;
border:#fff solid 1px;
}
.thumb-carousel-navbar .active{
opacity:.5;
border:#f00 solid 1px;
}
.carousel-border{
border-right:2px solid #fff;
}
$(document).ready(function()
{
$('#thumbCarousel').carousel({
interval: 3000
})
});
/* affix the Carousel Buttons to Carousel Item on scroll */
$('.nav-carousel').bind({
offset:
{
top: $('#thumbCarousel').height()-$('.nav-carousel').height()
}
});
$(document).ready( function()
{
var carouselContainer = $('.carousel');
var slideInterval = 2500;
$('#carousel').carousel({
interval: slideInterval
});
var clickEvent = false;
$('#thumbCarousel').on('click', '.nav-carousel a', function() {
clickEvent = true;
$('.nav-carousel li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e)
{
if(!clickEvent)
{
var count = $('.nav-carousel').children().length -1;
var current = $('.nav-carousel li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id)
{
$('.nav-carousel li').first().addClass('active');
}
}
clickEvent = false;
});
});
$(document).ready(function()
{
$('.slide1, .slide2, .slide3').hover(function()
{
$(this).find('.caption').delay(200).slideDown(350);
},
function()
{
$(this).find('.caption').delay(200).slideUp(350);
});
$('.fade1, .fade2').hover(
function(){
$(this).find('.caption').delay(200).fadeIn(350);
},
function(){
$(this).find('.caption').delay(200).fadeOut(350);
}
);
});
