"hunger games snippet"
Bootstrap 3.0.0 Snippet by pyoung2

<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-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>An autobiographical picture book!</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>The final installment!</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>Sparks will fly!</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>Let the Games begin!</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>Travel to the Underland with Gregor!</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> <ul class="nav nav-justified nav-carousel"> <li data-target="#thumbCarousel" data-slide-to="0" class="carousel-border active"><a data-href="#">Year of the Jungle</a></li> <li data-target="#thumbCarousel" data-slide-to="1" class="carousel-border"><a data-href="#">Mockingjay</a></li> <li data-target="#thumbCarousel" data-slide-to="2" class="carousel-border"><a data-href="#">Catching Fire</a></li> <li data-target="#thumbCarousel" data-slide-to="3" class="carousel-border"><a data-href="#">The Hunger Games</a></li> <li data-target="#thumbCarousel" data-slide-to="4"><a data-href="#">Gregor The Overlander</a></li> </ul> </div><!--/myCarousel--> </div><!--/col-md-12--> </div> </div> <!-- Section Four --> <div class="row"> <h1><hr></h1> <section> <div class="row col-xs-6 col-xs-offset-3"> <p> <dl class="dl-horizontal"> <dt><code><script></code> JavaScript <small>(jQuery)</small> Code</dt> <dd>this is the write-up for the <b><em>JavaScript</em></b> that allows the <code>.nav-carousel</code> and <code>.carousel-indicator</code>to work when you click them. also, they will set <code>.active</code> state when <b>slid</b> to or <b>clicked</b>.<br> <pre class="pre-scrollable"><code type="text/javascript"><script type="text/javascript"> $(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); } ); }); $('.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></code></pre> </dd> </dl> </p> </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); } ); });

Questions / Comments:

Related: See More