How to fade in and fade out background with bootstrap text carousel ?
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:
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 >w3wiki</ h1 > < div id = "carouselExampleFade" class = "carousel slide carousel-fade" data-ride = "carousel" > < div class = "carousel-inner" > < div class = "carousel-item active" > < h1 >Hii w3wiki</ 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 :
Contact Us