In this article, we will show you how to fade in and fade out the background with a bootstrap text carousel. Carousel is a slideshow, and it is used for cycling components like images or text.
Approach: To create a fade-in and fade-out background with a bootstrap text carousel we have followed some basic steps.
Step 1: Add bootstrap CDN to your HTML code.
Step 2: For making a bootstrap carousel you have to add class = "carousel" in your HTML div box.
Step 3: To create the carousel fade in and fade out transition instead of a slider you have to add a class="carousel-fade".
Step 4: Finally add text in your div box which you want to play in the carousel with a class="carousel-item".
Example:
<!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>
Output :
