<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">
<div class="row">
<div class="span12 carousel-container">
<div id="carousel-1" class="carousel slide carousel-fade">
<!-- Carousel items -->
<div class="carousel-inner">
<div data-slide-no="0" class="item carousel-item active">
<a href="#"><img src="http://lorempixel.com/1920/1080/animals" alt=""></a>
</div>
<div data-slide-no="1" class="item carousel-item">
<a href="#"><img src="http://lorempixel.com/1920/1080/food" alt=""></a>
</div>
<div data-slide-no="2" class="item carousel-item">
<a href="#"><img src="http://lorempixel.com/1920/1080/cats" alt=""></a>
</div>
<div class="carousel-caption">
<h4>Assembleia Nestlé</h4>
<p></p>
</div>
</div>
<!-- Carousel nav -->
<!--
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
-->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="myCarousel-target active"></li>
<li data-target="#carousel" data-slide-to="1" class="myCarousel-target"></li>
<li data-target="#carousel" data-slide-to="2" class="myCarousel-target"></li>
</ol>
</div>
</div>
<div class="span12 carousel-container">
<div id="carousel-2" class="carousel slide carousel-fade">
<!-- Carousel items -->
<div class="carousel-inner">
<div data-slide-no="0" class="item carousel-item active">
<a href="#"><img src="http://lorempixel.com/1920/1080/animals" alt=""></a>
</div>
<div data-slide-no="1" class="item carousel-item">
<a href="#"><img src="http://lorempixel.com/1920/1080/food" alt=""></a>
</div>
<div data-slide-no="2" class="item carousel-item">
<a href="#"><img src="http://lorempixel.com/1920/1080/cats" alt=""></a>
</div>
<div class="carousel-caption">
<h4>My album 2</h4>
<p></p>
</div>
</div>
<!-- Carousel nav -->
<!--
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
-->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="myCarousel-target active"></li>
<li data-target="#carousel" data-slide-to="1" class="myCarousel-target"></li>
<li data-target="#carousel" data-slide-to="2" class="myCarousel-target"></li>
</ol>
</div>
</div>
</div>
</div>
.carousel>.carousel-inner>.item>.circleElement {
background-color: #000;
border-radius: 50%;
position: absolute;
top: 11%;
left: 39%;
width: 400px;
height: 400px;
opacity: .5;
}
.carousel-indicators {
background: none;
border-radius: 4px;
bottom: 0;
text-align: center;
}
.carousel-indicators li { cursor: pointer }
.carousel-control {
width: 60px;
height: 0;
margin-top: -20px;
font-size: 100px;
background: none;
border: none;
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
.carousel-indicators li {
background-color: #999;
background-color: rgba(255,255,255,0.3);
}
.carousel-caption {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: unset;
padding: 0 35px 40px;
text-align: center;
right: unset;
width: 100%;
}
.carousel-caption h4 {
font-family: "lato";
font-weight: 100;
font-size: 54px;
}
.carousel-caption p {
font-family: "lato";
font-size: 22px;
margin-bottom: -8px;
font-weight: 300;
line-height: 30px;
}
.carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active { opacity: 1 }
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right { opacity: 1 }
.carousel-fade .carousel-control { z-index: 2 }
@media only screen and (max-width:767px) {
h1 { font-size: 30px !important }
.carousel-caption {
padding: 15px;
text-align: center;
}
.carousel-caption h4 { font-size: 30px }
.carousel-caption p {
margin-top: 10px;
font-size: 10px;
margin-bottom: -10px;
}
body { padding: 0 !important }
.carousel { margin-bottom: 0 }
.hero-unit { padding-bottom: 60px }
.hero-unit p { font-size: 16px }
}
.carousel-container {
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
margin: 20px auto 0;
width: 80% !important;
}
/* KM Fix */
// Modified by Tiago S. Oliveira <TiagoProff@hotmail.com>
$(document).ready(function () {
$('[id^="carousel-"]').each(function () {
var target = $(this);
target.carousel({
interval: 4000
});
target.on("slid", function () {
var to_slide;
to_slide = target.find(".carousel-item.active").attr("data-slide-no");
target.find(".myCarousel-target.active").removeClass("active");
target.find(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active");
});
target.find(".myCarousel-target").on("click", function () {
//$(this).preventDefault();
target.carousel(parseInt($(this).attr("data-slide-to")));
target.find(".myCarousel-target.active").removeClass("active");
$(this).addClass("active");
});
});
});
