Cómo crear un carrusel/presentación de diapositivas en Bootstrap 5

Carrusel es una presentación dinámica de contenido donde los textos y las imágenes se combinan para hacer que las cosas sean visibles y accesibles para el usuario en bicicleta una y otra vez.Carousel se usa para exhibir la actividad reciente o exclusiva en un sitio web y facilitar que el usuario explore sin ningún problema.

Este artículo es sobre

• Crear un carrusel
• Carrusel con subtítulos
• Proceso paso a paso de crear un carrusel

Cómo crear un carrusel

Para crear un uso de carrusel .carrusel clase junto con data-bs-ride = "carrusel" atributo, luego envuélvelo alrededor de los divs con clases .guardador de carrusel Para agregar botones de navegación, .intermediario Para agregar imágenes de carrusel, .carrusel-control-previo Para agregar el botón de deslizamiento anterior, .carrusel-control-next Para agregar
Siguiente botón de diapositiva.

Código

Paso 1

Agregar .carrusel clase para crear un carrusel

Código

En el código anterior, .intermediario La clase se usa para agregar diapositivas a un carrusel y para agregar contenido a cada diapositiva .ítem de carrusel clase. Para el efecto de transición y animación de CSS cuando se mueve de una diapositiva a otra, agregue .deslizar clase.

Paso 2

Agregar .guardador de carrusel clase para agregar botones en carrusel:

Así es como se crea indicadores de carrusel.

Paso 3

Agregar .carrusel-control-previo y .Carrusel-Control-Icon juntos para crear y usar un botón anterior para volver a la diapositiva anterior.

Agregar .carrusel-control-next y .carrusel-control-next-ícon juntos para crear y usar un botón siguiente para ir a la siguiente diapositiva.

Así es como se crean los botones de deslizamiento de Carrusel Next y anteriores.

Cómo crear un carrusel con subtítulos

Para agregar un subtítulo a una diapositiva, solo agregue un DIV con una clase .encapricho de carrusel Dentro del Div con una clase .ítem de carrusel.

Código

Primera diapositiva

Esta es la primera diapositiva con subtítulos

De esta manera puede agregar subtítulos a su carrusel.

Conclusión

Para crear un uso de carrusel .carrusel clase junto con data-bs-ride = "carrusel" atributo, luego envuélvelo alrededor de los divs con clases .guardador de carrusel Para agregar botones de navegación, .intermediario Para agregar imágenes de carrusel, .carrusel-control-previo Para agregar el botón de deslizamiento anterior, .carrusel-control-next Para agregar
Siguiente botón de diapositiva. En el artículo anterior, el proceso de creación de un carrusel se explica con ejemplos para facilitarle la comprensión y crear su propio carrusel.