<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/16a085/ffffff&text=PLANO">
<div class="carousel-caption">
<h3>PLANO</h3>
<h4>El loteo comprende 3 zonas</h4>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/e67e22/ffffff&text=ZONA TRADICIONAL">
<div class="carousel-caption">
<h3>1 ZONA TRADICIONAL</h3>
<p>Para construcciones de uso permanente o de esparcimiento</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/2980b9/ffffff&text=MIRADOR DEL LAGO">
<div class="carousel-caption">
<h3>2 MIRADOR DEL LAGO</h3>
<p>Específico para construcciones elevadas para uso de esparcimiento con vista a los lagos.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/8e44ad/ffffff&text=ZONAS DE LAGOS">
<div class="carousel-caption">
<h3>3 ZONAS DE LAGOS</h3>
<p>Está planificado un complejo de cabañas, resto-bar, piscina, muelles de cortesía, guardería y bajada de lanchas.</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">PLANO</a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">1 ZONA TRADICIONAL</a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">2 MIRADOR DEL LAGO</a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">3 ZONAS DE LAGOS</a></li>
</ul>
</div>
<!-- End Carousel -->
</div>
body
{
padding-top: 20px;
}
.carousel-caption { width: 50%; }
#myCarousel .nav a small
{
display: block;
}
#myCarousel .nav
{
background: #eee;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
