Como criar uma apresentação de carrossel/slides no bootstrap 5

Carrossel é uma apresentação dinâmica de conteúdo em que textos e imagens são combinados para tornar as coisas visíveis e acessíveis para o usuário, pedalando de novo e de novo.O carrossel é usado para mostrar a atividade recente ou exclusiva em um site e facilitar a exploração do usuário sem nenhum problema.

Esse artigo é sobre

• Crie um carrossel
• Carrossel com legenda
• Processo passo a passo para criar um carrossel

Como criar um carrossel

Para criar um uso de carrossel .carrossel classe junto com data-bs-ride = "carrossel" atribuir, depois envolva -o em torno das divs com as classes .Carrossel-indicadores Para adicionar botões de navegação, .carrossel-interno Para adicionar imagens de carrossel, .Carrossel-Control-Prev Para adicionar o botão de slide anterior, .Carrossel-Control-Next adicionar
Próximo botão de slide.

Código

Passo 1

Adicionar .carrossel classe para criar criar um carrossel

Código

No código acima, .carrossel-interno A classe é usada para adicionar slides a um carrossel e adicionar conteúdo a cada uso de slides .Carrossel-Item aula. Para o efeito de transição e animação CSS ao passar de um slide para outro, adicione .deslizar aula.

Passo 2

Adicionar .Carrossel-indicadores classe para adicionar botões no carrossel:

É assim que você cria indicadores de carrossel.

etapa 3

Adicionar .Carrossel-Control-Prev e .Carrossel-Control-Prev-icon Juntos para criar e usar um botão anterior para voltar ao slide anterior.

Adicionar .Carrossel-Control-Next e .Carrossel-Control-Next-icon Juntos para criar e usar um botão próximo para ir para o próximo slide.

É assim que os botões de carrossel e slide anteriores são criados.

Como criar um carrossel com legenda

Para adicionar uma legenda a um slide, basta adicionar uma div com uma aula .Caption de carrossel Dentro da div com uma classe .Carrossel-Item.

Código

Primeiro slide

Este é o primeiro slide com legenda

Dessa forma, você pode adicionar legendas ao seu carrossel.

Conclusão

Para criar um uso de carrossel .carrossel classe junto com data-bs-ride = "carrossel" atribuir, depois envolva -o em torno das divs com as classes .Carrossel-indicadores Para adicionar botões de navegação, .carrossel-interno Para adicionar imagens de carrossel, .Carrossel-Control-Prev Para adicionar o botão de slide anterior, .Carrossel-Control-Next adicionar
Próximo botão de slide. No artigo acima, o processo de criação de um carrossel é explicado com exemplos para facilitar para você entender e criar seu próprio carrossel.