"Thumbnail Bootstrap Carousel with hover captions"
Bootstrap 3.3.0 Snippet by aali

<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 text-center"><h3>Bootstrap 3 Multiple Slide Carousel <br><small>Variant One w/ <b>"hover captions"</b></small></h3></div> <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"> <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"> <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"> <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"> <a href="#" class="img-responsive"> <img src="http://placehold.it/250/f00/fff&text=4" 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> <ul class="nav nav-justified nav-carousel"> <li data-target="#thumbCarousel" data-slide-to="0" class="carousel-border active"><a data-href="#">One</a></li> <li data-target="#thumbCarousel" data-slide-to="1" class="carousel-border"><a data-href="#">Two</a></li> <li data-target="#thumbCarousel" data-slide-to="2" class="carousel-border"><a data-href="#">Three</a></li> </ul> </div><!--/myCarousel--> </div><!--/col-md-12--> </div> </div> <div class="container-fluid"> <!-- Section One --> <div class="row"> <h1><hr></h1> <section> <div class="row col-xs-6 col-xs-offset-3"> </div> <h1><hr></h1> <!-- Section Two --> <div class="row"> <section> <div class="row col-xs-8 col-xs-offset-2"> <h3><code>carousel-control</code> element</h3><hr> <p class="text-center">This item has no change to it. only the styling is changed to not overlap the item elements at trigger hover events for item hover events</p> <hr> </div> <div class="row col-xs-6 col-xs-offset-3"> <p> <dl class="dl-horizontal"> <dt>carousel-control</dt> <dd>this is to move the controls outside the <code>.carousel-inner</code> element<br> <pre class="pre-scrollable"></pre> </dd> </dl> <hr> <pre><p>Sample text here...</p></pre> </p> </div> </section> </div> <!-- Section Three --> <div class="row"> <h1><hr></h1> <section> </section> </div> <!-- Section Four --> <div class="row"> <h1><hr></h1> <section> <div class="row col-xs-8 col-xs-offset-2"> <h3><code>#thumbCarousel</code> jQuery Script</h3><hr> <p class="text-center">this replaces the <code>carousel-indicator</code> with a Bootstrap <a href="http://getbootstrap.com/components/#navbar" title="Bootstrap Navbar" target="_blank">Navbar</a> styling for responsiveness in any viewport width</p> <hr> </div> </section> </div> <h1><hr></h1> </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>
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700); html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ -webkit-font-smoothing: antialiased; font: normal 100% arial,sans-serif; } html { position: relative; } body{ margin:0; padding:0; width:100%; max-width:100%; overflow-x:hidden; } article, aside, div, dt, figcaption, footer, form, header, hgroup, html, main, nav { display: block; } /*NAVBAR CUSTOM*/ .navbar-brand { float: left; font-size: 150%; width:auto; } .social li img{ width:50%; height:50%; } @media (min-width: 767px) { .navbar-nav.nav-justified > li{ float:none; } } .navbar-nav { margin: 1px 1px; z-index:100; clear:none; } /* customize nav style */ .navbar-custom { background-color: #2e2e2e; font-weight:700; text-transform:uppercase; border-width:0; } .navbar-custom .navbar-nav>li>a { color: #ddd; } .navbar-collapse{ background:#2e2e2e; margin:0; padding:0; } .navbar-nav.nav-justified > li:nth-child(2), .navbar-nav.nav-justified > li:nth-child(3), .navbar-nav.nav-justified > li:nth-child(4), .navbar-nav.nav-justified > li:nth-child(5){ border-right:1px #5e5e5e solid; } .navbar-nav.nav-justified > li:nth-child(3) > a:hover, .navbar-nav.nav-justified > li:nth-child(4) > a:hover, .navbar-nav.nav-justified > li:nth-child(5) > a:hover, .navbar-nav.nav-justified > li:nth-child(3) > a:focus, .navbar-nav.nav-justified > li:nth-child(4) > a:focus, .navbar-nav.nav-justified > li:nth-child(5) > a:focus{ border-bottom: 4px #ff0000 solid; background:#222222; } .navbar-nav.nav-justified > li:nth-last-child > a:hover, .navbar-nav.nav-justified > li:nth-last-child > a:focus, .navbar-nav.nav-justified > li:nth-last-child > a .active{ margin-bottom:-4px; } .navbar-nav.nav-justified > .navbar-nav .active, .navbar-nav.nav-justified > .active, .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .active > a{ border-bottom: 2px #ff0000 solid; font-weight:700; text-transform:uppercase; outline:none; box-shadow: 0px 3px 9px rgba(250, 250, 250, 0.45) inset; z-index:103; } .navbar-nav.nav-justified > li:first-child{ border-right:1px #5e5e5e solid; border-bottom:none; } .navbar-custom .dropdown-menu{ right:0; } .navbar-custom .navbar-nav>.dropdown>a .caret { border-top-color: #999; border-bottom-color: #999; } .navbar-collapse.in { /*3.0.2 bug workaround*/ overflow-y: visible; } .navbar-toggle { outline:0; } body{ background:#fff; overflow-x:hidden; padding-bottom:0; margin-bottom:0; } .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; } /*Page-header styling*/ .page-header > h1{ color:#fff; } .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; } #thumb-inner > .item{ position:relative; overflow:hidden; } #thumb-inner > .item > a img{ position:relative; overflow:hidden; } .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; } .nav-carousel{ padding-bottom:0%; width: 90%; z-index:101; -webkit-transition: all 3s ease-in-out; transition: all 3s ease-in-out; float:none; margin:0 5%; height:auto; position:absolute; top:100%; bottom:0; border-bottom: .5px #ededed solid; border-top: .5px #ededed solid; } .nav-carousel li{ background:#000; } .nav-carousel li > a{ color:#f00; font-weight:800; } .nav-carousel li > a:hover{ background:#f00; color:#fff; } .carousel-border{ border-right:2px solid #fff; } .nav-carousel > .active > a, .nav-carousel > .active > a:hover, .nav-carousel > .active > a:focus, #carousel a:hover, #carousel a:focus{ background-color: #ff0000; color: #fff; outline:none; cursor:pointer; } .nav-carousel.affix{ width: 100%; position: static; z-index:101; height:auto; padding-bottom:0%; } .nav-carousel > li{ z-index:100; padding-bottom:0%; }
$(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); } ); });

Related: See More


Questions / Comments: