Puede incluirse en su página web usando “bootstrap.js” o “bootstrap.min.js”. Los carruseles no se admiten correctamente en Internet Explorer, esto se debe a que utilizan transiciones y animaciones CSS3 para lograr el efecto de deslizamiento. Bootstrap Carousel es una presentación de diapositivas de imágenes para que su página web se vea más atractiva. Pero el Bootstrap Carousel normal tomó toda la página web si las dimensiones de la imagen utilizada son enormes, hay un problema más en Bootstrap Carousel, que se acercará cuando la página tenga una pantalla más grande. Para manejar este tipo de situación, aquí en este artículo, diseñaremos un carrusel Bootstrap que ocupará solo la mitad de la página.
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:En este ejemplo, cambiaremos el valor de la propiedad CSS de tres clases, que son carousel-inner , item.active y item img . Fijará la altura del carrusel para la página.
html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<style>
article {
margin: 15px;
}
h1 {
color: green;
}
.carousel-inner {
height: 310px;
}
.item.active {
height: 310px!important;
}
.item img {
object-fit: cover;
height: 100%!important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="carousel1"
class="carousel slide carousel-fade"
data-ride="carousel" style="height:50vh">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#carousel1"
data-slide-to="0"
class="active"></li>
<li data-target="#carousel1"
data-slide-to="1"></li>
<li data-target="#carousel1"
data-slide-to="2"></li>
</ol>
<!--Slides-->
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html.png"
alt="First slide">
<div class="mask rgba-black-light"></div>
</div>
</div>
<div class="carousel-item">
<!-- Slideer 1 -->
<div class="view">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
alt="Second slide">
<div class="mask rgba-black-strong"></div>
</div>
</div>
<div class="carousel-item">
<!-- Slideer 2 -->
<div class="view">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190531150437/Bootstrap_image.png"
alt="Third slide">
<div class="mask rgba-black-slight"></div>
</div>
</div>
</div>
<!-- Slideer 3 -->
<a class="carousel-control-prev"
href="#carousel1" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carousel1" role="button"
data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<article>
<h1>GeekesforGeeks</h1>
<b>A Computer Science Portal for Geeks</b>
</article>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA