<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">
<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>Quisque augue ex, faucibus sit amet porta sit amet, porttitor vel lectus. Sed at sem et nisl varius faucibus. Ut nisl neque, finibus a ultrices laoreet, porttitor a lorem. Aliquam condimentum maximus nulla sit amet egestas.</p>
<p><a href="#" type="button" class="btn btn-primary">VIEW DETAILS</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://www.minsmanagement.com/wp-content/uploads/2016/11/EVENTS.jpg" width=250 height=250 alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 fade1">
<div class="caption">
<p>Cras vulputate lacinia diam in facilisis. Cras consequat massa interdum, euismod magna tincidunt, gravida diam. Vivamus neque lorem, faucibus vitae luctus accumsan, iaculis ac neque. Sed vel tincidunt felis. Donec scelerisque, nibh tincidunt rhoncus efficitur, velit</p>
<p><a href="#" type="button" class="btn btn-primary">VIEW DETAILS</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://kaeleventservices.com/wp-content/uploads/2012/01/event_21.png" width=250 height=250 alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 slide2">
<div class="caption">
<p>nisl eleifend orci, eget suscipit dui odio vitae purus. Nam vulputate, arcu id luctus malesuada, diam leo vehicula erat, ut pulvinar quam libero at quam. Maecenas congue pellentesque mattis. </p>
<p><a href="#" type="button" class="btn btn-primary">VIEW DETAILS</a></p>
</div>
<a href="#" class="img-responsive">
<img src="https://www.hellobc.com/getmedia/d795a622-efb8-4bff-bcbd-4222f1e20d31/2-4494-Chinese-New-Year.jpg.aspx" width=250 height=250 alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 fade2">
<div class="caption">
<p>Nulla non mauris nunc. In ultricies est dolor, ac iaculis nulla hendrerit quis. Praesent ornare leo non nunc accumsan cursus. Donec gravida posuere vestibulum. Cras sed rhoncus nisl. Mauris id nulla in dolor</p>
<p><a href="#" type="button" class="btn btn-primary">VIEW DETAILS</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://goldfishevents.com/wp-content/uploads/2016/02/event-city-corporate-event.jpg"width=250 height=250 alt="Demo Image">
</a>
</div>
</div><!--/item-->
<div class="item">
<div class="col-xs-3 slide3">
<div class="caption">
<p>dapibus blandit eget sed ligula. Pellentesque id vestibulum augue. Donec vehicula diam nunc, at molestie nisi hendrerit sollicitudin. Praesent feugiat congue rutrum. Fusce eleifend eu leo quis feugiat. Integer et tortor eget quam auctor vulputate. </p>
<p><a href="#" type="button" class="btn btn-primary">VIEW DETAILS</a></p>
</div>
<a href="#" class="img-responsive">
<img src="http://www.thaiembassy.com/wp-content/uploads/2015/04/thailand-sky-lanterns.jpg" width=250 height=250 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>
</div><!--/myCarousel-->
</div><!--/col-md-12-->
</div>
</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);
}
);
});
