--- title: Carousel localeTitle: Carrossel --- ## Carrossel O carrossel é um componente de apresentação de slides para percorrer elementos como imagens ou slides de texto. Ele fornece uma maneira dinâmica de representar uma grande quantidade de dados (texto ou imagens) deslizando ou passando de forma suave Sample Code of Image Slider está abaixo: ```html
``` Entendendo os atributos e classes usados ​​no exemplo acima: ### 1) Atributos a) `data-ride` : - `data-ride ="carousel"` permite que a animação do carregamento da página comece. b) `data-target` : - aponta para o id do carrossel c) `data-slide-to` : - Especifica para qual slide se deslocar ao clicar nos indicadores (pontos específicos). ### 2) Classes a) `carousel` : - `class="carousel"` especifica que o div contém carrossel. b) `slide` : - Esta classe adiciona transições CSS. c) `carousel-inner` : - Indica a seção de código que conterá o texto / imagem a ser exibido nos slides. d) `item` : - Refere-se ao conteúdo a ser exibido no carrossel. e) `left carousal-control` : - Isso adiciona o botão de voltar, permitindo deslizar para o slide anterior. f) `right carousal-control` : - Isso adiciona o próximo botão que permite deslizar para o próximo slide. g) `carousel-caption` : - Esta classe permite que você adicione legendas a cada slide. Nota: Adicione `class="carousel-caption"` para cada item. ### Uso #### 1) Via atributos de dados O atributo `data-ride="carousel"` é usado para marcar um carrossel como animação a partir do carregamento da página. `data-slide` aceita as palavras-chave `prev` ou `next` , que altera a posição do slide em relação à sua posição atual. #### 2) Via JavaScript Chame o carrossel manualmente com: `$('.carousel').carousel()` ### Opções As opções podem ser passadas por meio de atributos de dados ou JavaScript. Para atributos de dados, anexe o nome da opção aos `data-` , como em `data-interval=""` . Algumas opções frequentemente usadas são: * intervalo * pausa * passeio * embrulho ## detalhes adicionais * [Carrossel de Bootstrap](https://getbootstrap.com/docs/4.0/components/carousel/)