<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <!-- Wrapper for slides --> <ul class="carousel-inner"> <li class="item active"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> </li><!-- End Item --> <li class="item"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> </li><!-- End Item --> <li class="item"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> </li><!-- End Item --> <li class="item"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> </li><!-- End Item --> <li class="item"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> <img src="http://placehold.it/760x400/cccccc/ffffff" class="col-lg-4"> </li><!-- End Item --> </ul><!-- End Carousel Inner --> <ul class="list-group"> <li data-target="#myCarousel" data-slide-to="0" class="list-group-item active"><h4>Lorem </h4></li> <li data-target="#myCarousel" data-slide-to="1" class="list-group-item"><h4>consetetur</h4></li> <li data-target="#myCarousel" data-slide-to="2" class="list-group-item"><h4>tempor</h4></li> <li data-target="#myCarousel" data-slide-to="3" class="list-group-item"><h4>magna</h4></li> <li data-target="#myCarousel" data-slide-to="4" class="list-group-item"><h4>temport</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; } #myCarousel .carousel-inner{ padding:0; list-style:none; } #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 { position:absolute; margin-top: -10px; } #myCarousel .carousel-inner>.item>img, .carousel-inner>.item>a>img{ padding: 0 1px 0 1px; } #myCarousel .list-group-item { border-radius:0px; border:none; cursor:pointer; float: left; padding: 0px; } #myCarousel .list-group .active { background: transparent; border: none; margin-top: -28px; } #myCarousel .list-group .active h4 { margin-top: 30px; background: #000; width: 103px; height: 49px; color: #fff; text-align: center; line-height: 47px; margin-top: 8px; } #myCarousel .list-group h4 { text-align: center; line-height: 12px; padding: 0px 72px; } #myCarousel .list-group .active:before{ content: ""; width: 0; height: 0; margin-left:40px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; } @media (min-width: 992px) { #myCarousel .carousel-controls {display:none;} } @media (max-width: 991px) { .carousel-caption p, #myCarousel .list-group {display:none;} }

$(document).ready(function(){ var clickEvent = false; $('#myCarousel').carousel({ interval: 4000 }).on('click', '.list-group li', function() { clickEvent = true; $('.list-group li').removeClass('active'); $(this).addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.list-group').children().length -1; var current = $('.list-group li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.list-group li').first().addClass('active'); } } clickEvent = false; }); })