Carousel Bootstrap é um recurso muito importante para o desenvolvimento de aplicações Web modernas. Muito disso se deve ao fato de permitir uma fácil navegação por um conjunto de conteúdos. Com ele, as pessoas desenvolvedoras podem configurar uma vitrine virtual de forma manual ou automática.
Esse componente deixa muito mais fácil para as pessoas encontrarem o conteúdo que estão procurando, assim como torna o planejamento e desenvolvimento da aplicação menos complicado. Se você pensa que todas essas facilidades são difíceis de serem implementadas, não se engane.
Como você poderá conferir, não há dificuldade alguma em usar o Carousel Bootstrap para desenvolvimento de aplicações Web otimizadas. Você conseguirá facilmente aplicar essa solução com base em nossas explicações e exemplos práticos.
Esse recurso oferece agilidade aos profissionais, com uma interface de usuário altamente configurável, intuitiva e de fácil implementação. Apresentamos para vocês o guia do Carousel Bootstrap. Veremos, durante o artigo, as seguintes seções, detalhando o tema:
- O que é e como funciona o Carousel Bootstrap?
- Qual a sintaxe do Carousel Bootstrap?
- Quais os métodos usados no Carousel Bootstrap?
- Quais as classes do Carousel Bootstrap e para que servem?
- Quais as opções de configuração do Carousel Bootstrap?
- Como usar o Carousel Bootstrap? 5 exemplos na prática!
Então, prepare-se e vamos lá!
O que é e como funciona o Carousel Bootstrap?
O Carousel Bootstrap é um componente usado para construir interfaces de usuário, e que permite a navegação em um conjunto de conteúdos de maneira horizontal — como em um carrossel de parque de diversões, com vários personagens passando em nossa frente.
É um plugin do Bootstrap e é composto por um conjunto de itens construídos em CSS e Javascript. Há espaços pré-definidos para título, imagens e botões, (que, geralmente, são “próximo”, “anterior” ou outros indicadores de navegação entre os itens).
O carrossel pode ser configurado para permitir que os usuários naveguem pela janela e a disponibiliza com uma série de efeitos ou detalhes especiais. Veremos mais adiante outros detalhes sobre esses modelos de exibição.
Importante lembrar que plugins, como o Carousel Bootstrap, podem ser incluídos nos projetos Web de maneira individual, como em um arquivo “carousel.js”. Podem ser, também, incluídos a partir de todo o framework, por meio de um arquivo “bootstrap.js”, por exemplo.
Qual a sintaxe do Carousel Bootstrap?
Criamos uma div para conter um carrossel do tipo “slide”. Um tipo bem simples, em que os itens apenas passam de uma direção para outra. A seguir, você poderá conferir os detalhes da sintaxe desse componente explicada em seus principais detalhes.
Lembre-se de que você poderá testar o código no navegador de sua própria máquina! Primeiro, definimos a div e o Id de nosso carrossel, assim como o tipo dele, dessa maneira:
Criamos outra div para determinar cada item que desejamos que esteja ativo em nosso carrossel:
...
...
...
Aqui, acionamos os detalhes sobre a navegação em nosso carrossel, como os controles “próximo”e “anterior”:
Se você ainda não entendeu muito bem como esses recursos funcionam na prática, continue lendo o conteúdo. Teremos vários exemplos que ajudarão você a implementar o Carousel Bootstrap por conta própria!
Quais os métodos usados no Carousel Bootstrap?
O Carousel Bootstrap também conta com uma série de métodos para personalizar a aparência e o comportamento de nosso componente. A seguir, você poderá conferir os principais deles para utilizar em suas páginas com Bootstrap! Acompanhe:
- .carousel(‘options’): inicializa o carrossel com um objeto de opções, por exemplo:
$('.carrossel').carousel({
intervalo: 2000
})
- .carousel(‘cicle’): percorre os itens do carrossel da esquerda para a direita;
- .carousel(‘pause’): interrompe o carrossel de percorrer os itens que estão sendo mostrados nos slides;
- .carousel(‘number’): alterna o carrossel para um quadro específico. O retorno do método acontece antes que o item de destino seja mostrado — antes que o evento slid.bs.carousel ocorra (veja mais sobre o tema quando abordarmos os eventos);
- .carousel(‘prev’): volta para o item anterior. Retorna ao chamador antes que o item anterior tenha sido mostrado (antes que o evento slid.bs.carousel ocorra);
- .carousel(‘next’): bem semelhante ao anterior, pois alterna para o próximo item. O método também retorna dados antes que o próximo item seja mostrado (ou seja, antes que o evento slid.bs.carousel ocorra);
- .carousel(‘dispose’): destrói o carrossel de um elemento.
Quais as classes do Carousel Bootstrap e para que servem?
As classes do Carousel Bootstrap podem ser utilizadas para facilitar a personalização desses recursos em suas páginas. É importante compreender o funcionamento das principais delas, testando e descobrindo novas funções possíveis para o recurso. Abaixo, você poderá ver as classes mais utilizadas e saberá como aplicá-las em seu código.
.carousel
Cria o nosso carrossel.
.carousel-indicators
Adiciona indicadores.
.carousel-inner
Adiciona mais slides ao carrossel.
.carousel-item
Especifica o conteúdo de cada slide.
.carousel-control-prev
Adiciona um botão esquerdo (anterior) para que o usuário navegue entre os slides.
.carousel-control-next
O mesmo que a classe anterior, mas para lado diferente.
.carousel-control-prev-icon
Usado junto ds classes de controle de navegação — adiciona um ícone para deixar a navegação mais intuitiva ao usuário.
.carousel-control-next-icon
Tem a mesma função da classe anterior, mas para o lado direito (próximo).
.slide
Adiciona transições em CSS e animações em seu carrossel de itens. Se você não quiser essas animações, basta retirar a classe de seu código.
Atenção: elemento requerido pelo Carousel Bootstrap
A classe “.active” precisa ser adicionada em nossos slides. Caso contrário, eles não ficarão visíveis na página!
Conheça a lista de opções de configuração do Carousel Bootstrap!
As opções podem ser passadas via atributos de data ou pelo Javascript. Abaixo, você pode conferir as opções que podem ser inseridas em seus slides.
Nome Tipo Padrão Descrição interval number 5000 Tempo de atraso entre um ciclo automático de um item. Se falso, o ciclo não ocorre automaticamente. keyboard boolean true Aqui, identificamos se o carrossel deve reagir a quaisquer eventos de teclado. pause string | boolean “hover” Se definida como “hover”, a opção pausa o ciclo do carrossel e retoma o ciclo enquanto o mouse deixa o slide. Se definida como “false”, passar o mouse sobre o carrossel não o pausará. ride string false Reproduz automaticamente o carrossel depois que o usuário alterna manualmente o primeiro item. wrap boolean true Se o carrossel deve circular continuamente ou ter paradas bruscas.
Conheça os eventos
O Carousel Bootstrap disponibiliza dois eventos para se conectar à funcionalidade do elemento. Ambos têm as seguintes propriedades adicionais:
- direção: mostra qual é a direção na qual o carrossel está deslizando, seja para a esquerda, seja para a direita;
- relatedTarget: mostra qual é o elemento DOM que está sendo posicionado como o item ativo em nossos slides;
- from: mostra o índice do item atual (a partir de);
- to: mostra o índice do próximo item (para).
Todos os eventos de carrossel são disparados no próprio carrossel (
). Entre os tipos de eventos estão o slide.bs.carousel e o slid.bs.carousel.
O primeiro é acionado imediatamente quando o método de instância de slide é invocado. Já o segundo é acionado quando o carrossel completa sua transição de slides. Veja um exemplo em código:
$('#myCarousel').on('slide.bs.carousel', function () {
// seu comando preferido aqui
})
Como usar o Carousel Bootstrap? 5 exemplos na prática!
Passamos à parte prática do nosso guia, confira!
Página completa com uso do Carousel
Aqui, trouxemos uma página Web completa para você fazer os testes com o Carousel Bootstrap. Use-o como esqueleto para aplicar os outros exemplos que trazemos na sequência.
Exemplo Bootstrap Carousel
