引导带|轮播

在本文中，我们将介绍如何为您的网页创建图片幻灯片，以使其看起来更具吸引力。为此，我们将使用Bootstrap Carousel 。

可以使用“ bootstrap.js”或“ bootstrap.min.js”将其包含在您的网页中。 Internet Explorer不正确支持轮播，这是因为它们使用CSS3过渡和动画来实现幻灯片效果。

这就是我们如何使用引导轮播创建图像幻灯片的方法

例子：

    Bootstrap | Carousel
    
    
    
    
    
    
    

  

    
        GeeksforGeeks
        Bootstrap | Carousel
        
            
            
                
                
                
            
  
            
            
                
                    
                
  
                
                    
                
  
                
                    
                
            
           
            
            
                
                Previous
            
            
                
                Next
            
      
  

输出：

以上代码说明：
• “幻灯片包装器”部分：幻灯片在class为“ carousel-inner”的div中指定。幻灯片放映中每个图像的内容在div标签中为class =“ item”定义。可以是文本或图像。class =“ active”已添加到其中一张幻灯片中。否则，幻灯片的图像将不可见。
• 最外面的div： class =“ carousel”告诉我们该div标签包含一个旋转木马。class =“ carousel-slide”向图像添加CSS过渡和动画效果，从而使它们在显示新项目时可以滑动。如果您不希望出现这种效果，则不要放置此类。data -ride =” carousel”属性告诉Bootstrap在页面加载后立即开始幻灯片放映。
• “指示器”部分：指示器是每张幻灯片底部的小点，指示那里有多少张幻灯片以及我们当前正在查看的幻灯片。指示器在有序列表中指定为class =“ carousel-indicators” 。数据目标属性指向轮播的ID，并为其显示在幻灯片中的编号提供信息。单击特定点时， data-slide-to属性使图像滑动已分配给它的图像。
• “左右控件”部分：此代码添加了“左”和“右”按钮，使我们可以手动在幻灯片之间来回移动。 data-slide属性接受关键字“ prev”或“ next” ，这会将幻灯片位置更改为其当前位置。

向幻灯片添加字幕

在每个div class =“ item”中添加class =“ carousel-caption” ，为每个幻灯片创建一个标题。
例子：

    Bootstrap | Carousel
    
    
    
    
    
    
    

  

    
          
        
            
            
                
                
                  
            
  
            
            
                
                    
                    
                        GeeksforGeeks
                        Join Geeks Classes
                    
                
                
                    
                    
                        GeeksforGeeks
                        Join Geeks Classes
                    
                
            
           
            
            
                
                Previous
            
            
                
                Next
            
      
  

输出：

在Java脚本的帮助下使用Carousel只需在JavaScript代码中使用wrapper元素的ID或类选择器调用carousel()方法即可。

例子：

$(document).ready(function(){
    $("#myCarousel").carousel();
})

它们是某些选项，我们可以将其与JavaScript中的carousel()一起使用，以控制图像在多长时间内会发生变化等。

• 循环：它从左到右在轮播中循环
  例子：

  $(document).ready(function(){
      $(".start-slide").click(function(){
          $("#myCarousel").carousel('cycle');
      });
  });

• 暂停：阻止旋转木马移动到您想要的任何位置
  例子：

  $(document).ready(function(){
      $(".pause-slide").click(function(){
          $("#myCarousel").carousel('pause');
      });
  });

• NUMBER：根据特定帧循环轮播(从0开始，就像在数组中一样)
  例子：

  $(document).ready(function(){
      $(".slide-three").click(function(){
          $("#myCarousel").carousel(3);
      });
  });

• 上一条：将轮播循环到其先前的图像，就像我们之前在引导程序部分中所做的一样
  例子：

  $(document).ready(function(){
      $(".prev-slide").click(function(){
          $("#myCarousel").carousel('prev');
      });
  });

• NEXT：将轮播循环到下一个图像，与在轮播的引导部分中所做的相同
  例子：

  $(document).ready(function(){
      $(".next-slide").click(function(){
          $("#myCarousel").carousel('next');
      });
  });