slider
$(document).ready(function(){
// Highlight bottom nav links
var clickEvent = false;
$("#myCarousel").on("click", ".nav a", function(){
clickEvent = true;
$(this).parent().siblings().removeClass("active");
$(this).parent().addClass("active");
}).on("slid.bs.carousel", function(e){
if(!clickEvent){
itemIndex = $(e.relatedTarget).index();
targetNavItem = $(".nav li[data-slide-to='" + itemIndex + "']");
$(".nav li").not(targetNavItem).removeClass("active");
targetNavItem.addClass("active");
}
clickEvent = false;
});
});
.carousel {
margin: 30px 0;
background: #ccc;
}
.carousel .item {
text-align: center;
overflow: hidden;
height: 475px;
}
.carousel .item img {
max-width: 100%;
margin: 0 auto; /* Align slide image horizontally center in Bootstrap v3 */
}
.carousel .carousel-control {
width: 50px;
height: 50px;
background: #000;
margin: auto 0;
opacity: 0.8;
}
.carousel .carousel-control:hover {
opacity: 0.9;
}
.carousel .carousel-control i {
font-size: 41px;
margin-top: 3px;
}
.carousel-caption h3, .carousel-caption p {
color: #fff;
display: inline-block;
font-family: 'Oswald', sans-serif;
text-shadow: none;
margin-bottom: 20px;
}
.carousel-caption h3 {
background: rgba(175, 86, 86, 0.781);
padding: 12px 24px;
font-size: 40px;
text-transform: uppercase;
}
.carousel-caption p {
background: #0b65cca1;
padding: 10px 20px;
font-size: 20px;
font-weight: 300;
}
.carousel-indicators li, .carousel-indicators li.active {
margin-left: 4px;
margin-right: 4px;
}
.carousel-indicators li.active {
background: #20b0b9;
border-color: #20b0b9;
}
.carousel .nav {
background: #eee;
}
.carousel .nav a {
color: #333;
border-radius: 0;
font-size: 85%;
padding: 10px 16px;
background: transparent;
}
.carousel .nav .nav-item.active a {
color: #fff;
background: #ff0000;
}
.carousel .nav strong {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 110%;
text-transform: uppercase;
}
