"News Carousel 2"
Bootstrap 3.1.0 Snippet by bacanapps

<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 ----------> <section class="section-white"> <div class="container"> <div class="carousel slide" data-ride="carousel" id="carousel-example-generic"><!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carousel-example-generic"> </li> <li data-slide-to="1" data-target="#carousel-example-generic"> </li> <li data-slide-to="2" data-target="#carousel-example-generic"> </li> <li data-slide-to="3" data-target="#carousel-example-generic"> </li> </ol> <!-- 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> <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.png" /> <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> <div class="item"><img alt="..." src="http://hepaids2017.aids.gov.br/sites/default/files/styles/banner_1130_450_cor/public/museu_olho.png" /> <div class="carousel-caption"> <h4><a href="http://hepaids2017.aids.gov.br/pt-br/noticia/sai-resultado-da-avaliacao-dos-trabalhos-submetidos-ao-11o-congresso-de-hivaids-e-4o">Sai resultado da avaliação dos trabalhos submetidos ao 11º Congresso de HIV/Aids e 4º Congresso de Hepatites Virais</a></h4> <p>Os congressos acontecem do dia 26 ao dia 29 de setembro, em Curitiba<a class="label label-primary" href="http://hepaids2017.aids.gov.br/pt-br/noticia/sai-resultado-da-avaliacao-dos-trabalhos-submetidos-ao-11o-congresso-de-hivaids-e-4o" target="_self">Saiba mais</a></p> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div></div> </div> </section>
/* Makes images fully responsive */ .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; width: 100%; height: auto; } /* ------------------- Carousel Styling ------------------- */ .carousel-inner { border-radius: 11px; } .carousel-caption { background-color: rgba(0,0,0,.5); position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 0 0 10px 25px; color: #fff; text-align: left; } .carousel-indicators { position: absolute ; bottom: -50px; right: 0; left: 0; width: 100%; z-index: 15; margin: 0; padding: 0 5px 5px 0; text-align: right; } .carousel-indicators li { display: inline-block; width: 10px; height: 10px; text-indent: -999px; cursor: pointer; background-color: rgba(0, 0, 0, 100); margin: 1px; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); border-image: initial; border-radius: 10px; } .carousel-control.left, .carousel-control.right { background-image: none; } /* ------------------- Section Styling - Not needed for carousel styling ------------------- */ .section-white { padding: 10px 0; } .section-white { background-color: #fff; color: #555; } @media screen and (min-width: 768px) { .section-white { padding: 1.5em 0; } } @media screen and (min-width: 992px) { .container { /* max-width: 930px; */ max-width: 1130px; } }

Related: See More


Questions / Comments: