<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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" class="carousel slide carousel-fade">
<!-- Carousel items -->
<div class="carousel-inner">
<div data-slide-no="0" class="item carousel-item active">
<img src="http://lorempixel.com/1920/1080/animals" alt="">
<div class="carousel-caption">
<h4>We Help You Estimate!</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div data-slide-no="1" class="item carousel-item">
<img src="http://lorempixel.com/1920/1080/food" alt="">
<div class="carousel-caption">
<h4>second thumbnail</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div data-slide-no="2" class="item carousel-item">
<img src="http://lorempixel.com/1920/1080/cats" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</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>
</div>
<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>
.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 {
top: 35px;
background: #404549;
padding: 30px;
border-radius: 10px;
}
.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 {
padding: 35px;
text-align: center;
}
.carousel-caption h4 {
font-family: "lato";
font-weight: 100;
font-size: 61px;
}
.carousel-caption p {
font-family: "lato";
margin-top: 39px;
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 {
width: 80% !important;
padding-left: 10%;
margin-top: 35px;
}
// Generated by CoffeeScript 1.7.1
$(document).ready(function() {
$(".carousel").carousel({
interval: 2000
});
$(".carousel").on("slid", function() {
var to_slide;
to_slide = $(".carousel-item.active").attr("data-slide-no");
$(".myCarousel-target.active").removeClass("active");
$(".carousel-indicators [data-slide-to=" + to_slide + "]").addClass("active");
});
$(".myCarousel-target").on("click", function() {
$(this).preventDefault();
$(".carousel").carousel(parseInt($(this).attr("data-slide-to")));
$(".myCarousel-target.active").removeClass("active");
$(this).addClass("active");
});
});
