En este artículo, le mostraremos cómo aparecer y desaparecer gradualmente el fondo con un carrusel de texto de arranque. Carrusel es una presentación de diapositivas y se utiliza para ciclar componentes como imágenes o texto.
Enfoque: Para crear un fondo de aparición y desaparición gradual con un carrusel de texto de arranque, hemos seguido algunos pasos básicos.
-
Paso 1 : agregue CDN de arranque a su código HTML.
-
Paso 2: para hacer un carrusel de arranque, debe agregar class = «carrusel» en su cuadro div HTML .
-
Paso 3: Para crear la transición de fundido de entrada y salida del carrusel en lugar de un control deslizante, debe agregar un class=»carousel-fade» .
-
Paso 4: finalmente agregue el texto en su cuadro div que desea reproducir en el carrusel con una clase = «elemento de carrusel» .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<style>
h1 {
color: green;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
body {
box-sizing: inherit;
color: #fff !important;
}
h1 {
margin-top: 0;
text-align: center;
font-weight: 600;
}
.carousel {
margin-top: 10%;
width: 100%;
background-color: black;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="carouselExampleFade"
class="carousel slide carousel-fade"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1>Hii GeeksforGeeks</h1>
</div>
<div class="carousel-item">
<h1>Hello there</h1>
</div>
<div class="carousel-item">
<h1>GFG</h1>
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleFade"
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="#carouselExampleFade"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Producción :
Carrusel
Publicación traducida automáticamente
Artículo escrito por namanaggarwal1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA