Skip to content
Related Articles

Related Articles

Improve Article

How to fade in and fade out background with bootstrap text carousel ?

  • Last Updated : 12 May, 2021

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=
              rel="stylesheet" />
        <script src=
        </script>
        <script src=
        </script>
        <script src=
        </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 :

Carousel




My Personal Notes arrow_drop_up
Recommended Articles
Page :