<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);
}
);
});
