Carrosséis, também conhecidos como sliders de imagem, são elementos interativos utilizados para exibir uma série de imagens ou itens de conteúdo em rotação. São frequentemente empregados para apresentar produtos, itens de portfólio ou conteúdos em destaque.

Principais Características

O componente de carrossel do Bootstrap é uma ferramenta avançada para criar experiências de usuário envolventes. Oferece ciclo automático, controles de navegação e opções de personalização para efeitos de transição, tempo e indicadores.

Classes de Utilização

• carousel: Esta classe é aplicada ao elemento contêiner do carrossel;
• carousel-inner: Esta classe é aplicada a um elemento <div> dentro do contêiner. Ela envolve todos os itens do carrossel (slides) e define o conteúdo interno do carrossel;
• carousel-item: Esta classe é aplicada aos slides individuais dentro do carrossel. Cada carousel-item representa um slide no carrossel;
• active: Esta classe marca um slide como ativo ou o slide atualmente exibido. Garante que o slide correspondente esteja visível quando o carrossel é renderizado;
• carousel-control-prev e carousel-control-next: Essas classes são aplicadas aos botões de navegação anterior e próximo. Fornecem controles para que os usuários naveguem manualmente pelo carrossel;
• data-bs-target e data-bs-slide: Esses atributos são utilizados com os botões de navegação para especificar o carrossel de destino e a direção das transições dos slides;
• carousel-indicators: Esta classe é aplicada a uma lista de elementos indicadores (geralmente elementos <li>) que representam cada slide do carrossel;
• data-bs-interval e data-bs-pause: Esses atributos configuram o intervalo (em milissegundos) entre as transições dos slides e especificam se o carrossel deve pausar ao passar o mouse ou ao receber foco.