Bootstrap es una colección de herramientas gratuitas y de código abierto para crear sitios web y aplicaciones web receptivos. Es el marco HTML, CSS y JavaScript más popular para desarrollar sitios web receptivos y móviles. Resuelve muchos problemas que tuvimos una vez, incluido el problema de compatibilidad entre navegadores.
Carrusel es el componente de presentación de diapositivas de bootstrap que se usa ampliamente para presentaciones de diapositivas o para recorrer diferentes elementos de un documento HTML, especialmente contenedores de imágenes o textos.
Enlaces Bootstrap CDN: para conocer los usos del carrusel bootstrap, tenemos que incluir los archivos de la biblioteca Bootstrap y jQuery CDN en los códigos HTML.
<!– Bootstrap CSS –>
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”><!– jQuery –>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” ></script><!– Proper.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script><!– Bootstrap JavaScript –>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
Usos: el uso principal del complemento de carrusel es implementar un control deslizante o una presentación de diapositivas de imágenes. El div HTML que contiene imágenes también puede contener texto. En esta sección, vamos a hacer una presentación de diapositivas de imágenes con la ayuda del complemento de carrusel de Bootstrap siguiendo los siguientes pasos.
- Cree un elemento div HTML con la clase ‘carrusel’. Si desea una presentación de diapositivas de las imágenes automáticamente, agregue también una ‘diapositiva’ de clase.
- Asigne una identificación «carouselExampleControls» al elemento div para controlar la presentación de diapositivas con botones.
- Agregue el atributo «viaje de datos» como «carrusel» para activar acciones de JavaScript.
- Dentro del div, cree otro div anidado con la clase «carrusel-interior». Este div contendrá todos los elementos del carrusel excepto los botones que se usan para controlar el carrusel.
- Dentro de ese div, cree otro div «elemento de carrusel». Agregue la clase ‘activa’ a la diapositiva de carrusel predeterminada agregando la imagen y el título de la diapositiva de carrusel. Agregue tantos elementos de carrusel como desee.
- Agregue la clase «carrusel-control-anterior» y «carrusel-control-siguiente» a los enlaces de diapositiva anterior y siguiente respectivamente.
- Agregue los atributos «diapositiva de datos» como «anterior» y «siguiente» para los iconos anterior y siguiente del carrusel.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!--Bootstrap CSS-->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!--JQUERY, Proper.js and Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
</script>
<style>
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="carouselExampleControls"
class="carousel slide"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831104937/img1.png">
<div class="carousel-caption">
<h3>Red Image</h3>
<p>
Here we can include some
text for the Red Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831105013/img2-300x200.png">
<div class="carousel-caption">
<h3>Blue Image</h3>
<p>
Here we can include some
text for the Blue Image
</p>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210831105054/img3-300x200.png">
<div class="carousel-caption">
<h3>Green Image</h3>
<p>
Here we can include some
text for the Green Image
</p>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleControls"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
</a>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA