<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="middle_bar"> </div>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/760x400/cccccc/ffffff">
<div class="carousel-caption">
<h4><a href="#">Lorem ipsum dolor sit amet consetetur sadipscing</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/999999/cccccc">
<div class="carousel-caption">
<h4><a href="#">consetetur sadipscing elitr, sed diam nonumy eirmod</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/dddddd/333333">
<div class="carousel-caption">
<h4><a href="#">tempor invidunt ut labore et dolore</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/999999/cccccc">
<div class="carousel-caption">
<h4><a href="#">magna aliquyam erat, sed diam voluptua</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/760x400/dddddd/333333">
<div class="carousel-caption">
<h4><a href="#">tempor invidunt ut labore et dolore magna aliquyam erat</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank">Free Bootstrap Carousel Collection</a></p>
</div>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<ul class="list-group col-sm-4 carousel-controls-group">
<li data-target="#myCarousel" data-slide-to="0" class="list-group-item"><h4>Lorem ipsum dolor sit amet consetetur sadipscing</h4></li>
<li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur sadipscing elitr, sed diam nonumy eirmod</h4></li>
<li data-target="#myCarousel" data-slide-to="2" class="list-group-item active"><h4>tempor invidunt ut labore et dolore</h4></li>
<li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna aliquyam erat, sed diam voluptua</h4></li>
<li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>tempor invidunt ut labore et dolore magna aliquyam erat</h4></li>
</ul>
<!-- Controls -->
<div class="carousel-controls">
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div><!-- End Carousel -->
</div>
body { padding-top: 50px; }
.carousel .middle_bar{
position: absolute;
background: #eee;
right: 0;
left: 0;
z-index: 50;
}
#myCarousel .carousel-caption {
left:0;
right:0;
bottom:0;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
}
#myCarousel .list-group-item{background: transparent;border: none;}
#myCarousel .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus{
color: #000 !important;
font-weight: bold !important;
text-shadow: 1px 1px #f60;
}
#myCarousel #carousel-controls-group{z-index: 200}
#myCarousel .carousel-inner{z-index: 500}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
z-index: 190;
}
#myCarousel .list-group-item {
border-radius:0px;
cursor:pointer;
}
@media (min-width: 992px) {
#myCarousel {padding-right:33.3333%;}
#myCarousel .carousel-controls {display:none;}
}
@media (max-width: 991px) {
.carousel-caption p,
#myCarousel .list-group {display:none;}
}
$(document).ready(function () {
var middle_bar = $('.carousel .middle_bar');
var controls_group = $('#myCarousel .carousel-controls-group');
var total_controls = controls_group.find("li").length;
var middle_control_index = parseInt(total_controls / 2);
var controls_group_li_height = controls_group.find("li")[0].clientHeight;
var setUpMiddleBar = function () {
middle_bar.height(controls_group_li_height);
middle_bar.css("top", controls_group_li_height * middle_control_index);
}
setUpMiddleBar();
var clickEvent = false;
$('#myCarousel').carousel({
interval: 4000
}).on('slid.bs.carousel', function (e) {
if (!clickEvent) {
var count = total_controls;
var first = controls_group.find('li').first();
first.slideUp("slow", function () {
$(this).clone().appendTo('.list-group');
controls_group.find('li').show();
$(this).remove();
controls_group.find("li").removeClass("active");
controls_group.find("li").eq(middle_control_index).addClass("active");
//update indexes
// set last to 0
});
}
clickEvent = false;
});
})
$(window).load(function () {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight / itemlength + 1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
