如何使用引导文本轮播淡入和淡出背景？

在本文中，我们将向您展示如何使用引导文本轮播来淡入和淡出背景。 Carousel 是一种幻灯片，用于循环播放图像或文本等组件。

方法：要使用引导文本轮播创建淡入淡出背景，我们遵循了一些基本步骤。

• 第 1 步：将引导 CDN 添加到您的 HTML 代码中。

• 第 2 步：要制作引导轮播，您必须在 HTML div框中添加class = “carousel” 。

• 第 3 步：要创建轮播淡入淡出过渡而不是滑块，您必须添加一个class=”carousel-fade” 。

• 第 4 步：最后在div框中添加要在轮播中播放的文本，其中class=”carousel-item” 。

例子：

HTML

    
        
        
        
        
        
        
        
  
        
            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;
            }
        
    
    
        GeeksforGeeks
  
        
            
                
                    Hii GeeksforGeeks
                
                
                    Hello there
                
                
                    GFG
                
            
            
                
                
                Previous
            
            
                 
                
                Next
            
        
    

输出 ：

旋转木马