<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="carousel slide" data-ride="carousel" id="myCarousel"><!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><img alt="" src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/testeira_site.jpg" />
<div class="carousel-caption">
<h4><a href="http://hepaids2017.aids.gov.br/pt-br/noticia/abertas-inscricoes-para-o-hepaids-2017">Abertas as inscrições para o HepAids 2017</a></h4>
<p>Congresso acontece de 26 e 29 de setembro, em Curitiba (PR). As inscrições são gratuitas e limitdas.<a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/abertas-inscricoes-para-o-hepaids-2017" target="_self">Saiba mais</a></p>
</div>
</div>
<!-- End Item -->
<div class="item"><img alt="" src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/img_5831_0.jpg" />
<div class="carousel-caption">
<h4><a href="http://hepaids2017.aids.gov.br/pt-br/noticia/organizacao-do-congresso-divulga-carta-aos-participantes">Organização do Congresso divulga carta aos participantes</a></h4>
<p>Ousar nas estratégias de prevenção para o HIV e para as hepatites virais: é isso que queremos deste Congresso” - Drª Adele Benzaken, presidenta do 11º Congresso de HIV/Aids e 4º Congresso de Hepatites Virais. <a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/organizacao-do-congresso-divulga-carta-aos-participantes" target="_self">Leia a íntegra da carta da presidenta</a></p>
</div>
</div>
<div class="item"><img alt="" src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/mosaico.jpg" />
<div class="carousel-caption">
<h4><a href="http://hepaids2017.aids.gov.br/pt-br/noticia/presencas-confirmadas-no-congresso">Presenças confirmadas no Congresso</a></h4>
<p>Saiba quem são os representantes da comunidade científica que já confirmam presença no 11º Congresso de HIV/Aids e 4º Congresso de Hepatites Virais. <a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/presencas-confirmadas-no-congresso" target="_self">Saiba mais</a></p>
</div>
</div>
<!-- End Item -->
<div class="item"><img alt="" src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/museu_olho.jpg" />
<div class="carousel-caption">
<h4><a href="http://hepaids2017.aids.gov.br/pt-br/noticia/conheca-cidade-sede-dos-congressos">Conheça a cidade sede dos congressos</a></h4>
<p>Curitiba, capital do Paraná é uma cidade planejada que oferece, a quem a visita, a combinação harmoniosa entre paisagens naturais e o espaço urbano. A cidade receberá os Congressos de 26 a 29 de setembro.<a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/conheca-cidade-sede-dos-congressos" target="_self">Saiba mais</a></p>
</div>
</div>
<!-- End Item --><!--
<div class="item"><img alt="" src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/jardim_botanico2.jpg" />
<div class="carousel-caption">
<h4><a href="#">Notícia em destaque 5</a></h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. <a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/representantes-da-comunidade-cientifica-confirmam-presenca-no-11o-congresso-de-hivaids-e-4o" target="_blank">link da notícia aqui</a></p>
</div>
</div>
<!-- End Item --></div>
<!-- End Carousel Inner -->
<ul class="list-group col-sm-4">
<li class="list-group-item active" data-slide-to="0" data-target="#myCarousel">
<h4>INSCRIÇÕES</h4>
</li>
<li class="list-group-item" data-slide-to="1" data-target="#myCarousel">
<h4>PALAVRA DA PRESIDENTA</h4>
</li>
<li class="list-group-item" data-slide-to="2" data-target="#myCarousel">
<h4>PALESTRANTES</h4>
</li>
<li class="list-group-item" data-slide-to="3" data-target="#myCarousel">
<h4>Conheça a cidade sede dos congressos</h4>
</li>
<!--
<li class="list-group-item" data-slide-to="4" data-target="#myCarousel">
<h4>Notícia em destaque 5</h4>
</li><a class="item-readmore font-nav" href="http://hepaids2017.aids.gov.br/noticias" title="Notícias"><i class="fa fa-plus-circle"></i> <span>LEIA TODAS AS NOTÍCIAS</span></a>
-->
<li><a class="item-readmore" href="http://hepaids2017.aids.gov.br/pt-br/noticias">Veja todas as notícias</a></li>
</ul>
<!-- Controls -->
<div class="carousel-controls"></div>
</div>
<!-- End Carousel --></div>
body { padding-top: 50px; }
a {
color: #f1d001;
text-decoration: none;
}
h4, .h4 {
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
}
h4 a:hover {
color: #f1d001;
text-decoration:none;
}
#myCarousel .carousel-caption {
left:0;
right:0;
/* top: 295px; */
top: 440px;
text-align:left;
padding:10px;
background:rgba(0,0,0,0.6);
text-shadow:none;
border-radius: 10px;
}
#myCarousel .list-group {
position:absolute;
top:0;
right:0;
display: none;
}
#myCarousel .list-group-item {
border-radius: 10px;
cursor: pointer;
background-color: #009bdb;
margin-left: 20px;
margin-top: 2px;
}
#myCarousel .list-group .active {
background-color:#eee;
}
@media (min-width: 992px) {
#myCarousel {padding-right:1%;}
/* #myCarousel {padding-right:33.3333%;} */
#myCarousel .carousel-controls {display:none;}
}
@media (max-width: 991px) {
.carousel-caption p,
#myCarousel .list-group {display:none;}
}
.list-group-item.active, .list-group-item:focus {
z-index: 2;
color: #000000!important;
background-color: #009bdb!important;
border-color: #f1d001!important;
}
.list-group-item.active:hover {
z-index: 2;
color: #000000!important;
background-color: #009bdb!important;
border-color: #009bdb!important;
}
.list-group-item:hover {
z-index: 2;
color: #000000!important;
background-color: #f1d001!important;
border-color: #009bdb!important;
}
a.item-readmore {
float: right;
margin-top: 20px;
padding: 10px;
border-radius: 5px;
background-color: #009bdb;
color: #ffffff;
width:75%;
}
.panel-pane.pane-entity-field.pane-node-body {
background-color: #f5f5f5;
border-radius: 10px;
padding: 20px;
border: solid;
border-color: #cad225;
border-width: 2px;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
/* height: 430px; */
height: 580px;
}
$(document).ready(function(){
var clickEvent = false;
$('#myCarousel').carousel({
interval: 4000
}).on('click', '.list-group li', function() {
clickEvent = true;
$('.list-group li').removeClass('active');
$(this).addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.list-group').children().length -1;
var current = $('.list-group li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.list-group li').first().addClass('active');
}
}
clickEvent = false;
});
})
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
