<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 id="myCarousel" class="carousel slide">
<!-- Dot Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
<li data-target="#myCarousel" data-slide-to="7"></li>
<li data-target="#myCarousel" data-slide-to="8"></li>
<li data-target="#myCarousel" data-slide-to="9"></li>
<li data-target="#myCarousel" data-slide-to="10"></li>
<li data-target="#myCarousel" data-slide-to="11"></li>
<li data-target="#myCarousel" data-slide-to="12"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active"><img alt="Museu Oscar Niemeyer" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/museu_olho.jpg" width="1130" /></div>
<div class="item"><img alt="90 90 90" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_9835_1.jpg" width="1130" /></div>
<div class="item"><img alt="Ópera de Arame" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/arame.jpg" width="1130" /></div>
<div class="item"><img alt="Dra. Adele rindo" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_3269_1.jpg" width="1130" /></div>
<div class="item"><img alt="Jardim Botânico" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/jardim_botanico2.jpg" width="1130" /></div>
<div class="item"><img alt="Gil" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_3307_1.jpg" width="1130" /></div>
<div class="item"><img alt="ponto onibus" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/onibus.jpg" width="1130" /></div>
<div class="item"><img alt="plateia" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_9840_1.jpg" width="1130" /></div>
<div class="item"><img alt="Jardim" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/img_5941.jpg" width="1130" /></div>
<div class="item"><img alt="plateia 2" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_9841_1.jpg" width="1130" /></div>
<div class="item"><img alt="Parque Tanguá" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_cor/public/curitiba1.jpg" width="1130" /></div>
<div class="item"><img alt="grupo" height="450" src="http://www6.aids.gov.br/aidsehepatites2017/sites/default/files/styles/banner_1130_450_bw/public/img_3240_copia_1.jpg" width="1130" /></div>
</div>
<!-- Navigation -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
.carousel {
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
left:0;
opacity:0;
z-index:2;
}
.carousel .next, .carousel .prev {
left:0;
opacity:0.9;
z-index:1;
}
.item:nth-child(1) {
background: transparent;
}
.item:nth-child(2) {
background: transparent;
}
.item:nth-child(3) {
background: transparent;
}
.carousel-control.right {
right: 40px;
left: auto;
background-image: -webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
background-image: -o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
background-repeat: repeat-x;
}
$(document).ready(function() {
$('.carousel').carousel({interval: 2000});
});
