#desenvolvimento

Carousel simplificado com Twitter Bootstrap e jQuery


Olá pessoal.

Neste post iremos ver mais um plugin jQuery e Twitter Bootstrap, o Carousel. Com ele é possível criar facilmente aquelas transições de imagens. Mas aqui vamos fazer apenas uma transição de divs a título de aprendizado. Para isto aproveitaremos a estrutura feita no post sobre dropdown.

Então só falta criar um arquivo chamado index.html, e acrescentar o código abaixo dentro da tag body:

<!-- Div na qual o "carousel" será aplicado. -->
<div id="div-carousel" class="carousel slide">
   <div class="carousel-inner">
      <!-- Divs com efeito de transição. -->
      <div class="item active">
         Conteúdo da DIV 1.
      </div>
      <div class="item">
         Conteúdo da DIV 2.
      </div>
   </div>
</div>
<div class="row">
   <!-- Botões de navegação -->
   <div id="div-1" class="span2">
      <a id="a-1" class="btn" href="#div-carousel" data-slide="prev"><i class="icon-chevron-left"></i>Voltar para DIV 1</a>
   </div>
   <div id="div-2" class="span2">
      <a id="a-2" class="btn" href="#div-carousel" data-slide="next">Avançar para DIV 2<i class="icon-chevron-right"></i></a>
   </div>
</div>

Para finalizar falta acrescentar o código Javascript que aplicará o efeito do carousel:

<script type="text/javascript">
   $(document).ready(function () {

      // Aplica o efeito de "carousel" nas divs que possuirem a classe carousel.
      $('.carousel').carousel({
         interval: false
      });

      // Oculta o botão de navegação para a div 1.
      $('#div-1').hide();

      // Aplica a transição quando houver click no link AVANÇAR.
      $("#a-1").click(function () {
         $('#div-carousel').carousel(0);
         $('#div-1').hide();
         $('#div-2').show();
         return false;
      });

      // Aplica a transição quando houver click no link VOLTAR.
      $("#a-2").click(function () {
         $('#div-carousel').carousel(1);
         $('#div-1').show();
         $('#div-2').hide();
         return false;
      });
   });
</script>

Com isto implementamos a utilização de um plugin muito útil na construção de sites e sistemas um pouco mais interativos.

Baixe o código completo.

Até breve 😉

Anúncios
Padrão

2 comentários sobre “Carousel simplificado com Twitter Bootstrap e jQuery

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s