如何在运行时更改Bootstrap轮播间隔？

我们将学习如何使用引导程序在运行时更改轮播间隔。在此示例中，我们将讨论多种方法。 Bootstrap轮播是一种幻灯片演示，可用于浏览使用JavaScript，CSS和动画构建的多个内容。它适用于文本，图像和自定义标记。它还包括用于控制其运动的上一个和下一个控件和指示器。

方法1：我们可以通过使用每个轮播项目的数据间隔属性来控制动画。给出的示例是理解此概念的最佳示例。 Data-interval属性用于设置两个轮播项目之间的间隔时间，默认情况下，其值为3000毫秒。

HTML

  

    
    
    
    
    
    
    
    
  
    geeksforgeeks

  

    
        
            
            
            
        
        
            
                
            
            
                
            
            
                
            
        
        
            
            Previous
        
        
            
            Next
        
    

  

输出：

方法2：在这种方法中，我们将使用Bootstrap API方法更改动画间隔。它以一个参数作为单位毫秒的间隔，即(1s = 1000millisecond)。我们分配的间隔将更改运行时所有轮播项目之间的动画时间。轮播函数中的数据间隔用于设置两个图像幻灯片之间的时间。

句法

$('.carousel').carousel({
    interval: time in millisecond
});

的HTML

  

    
    
    
    
    
    
    
    
  
    geeksforgeeks

  

    
        
            
            
            
        
        
            
                
            
            
                
            
            
                
            
        
        
            
            Previous
        
        
            
            Next
        
    
  
    
        // Handle Bootstrap carousel slide event
        $('.carousel').carousel({
            interval: 100
        });
    

  

输出：

方法3：我们可以使用data-attribute和javascript设置数据间隔。与上述两种方法一样，这种方法非常简单。在这种方法中，我们将选择轮播类div，并使用attr()方法更改属性。 attr()方法是一种jquery方法，用于设置或返回所选元素的属性和值。使用此方法返回值时，它将返回第一个匹配元素的值；如果使用该方法来设置属性的值，则它将设置一个或多个属性的属性。

句法：

$('.carousel').attr(
    "data-interval","interval that you want to set (in milisec)
");

的HTML

    
        
        
        
        
        
        
        
        
  
        geeksforgeeks
    
    
        
            
                
                
                
                
                
                
            
            
                
                    
                
                
                    
                
                
                    
                
            
            
                
                
                Previous
            
            
                
                Next
            
        
        
            //handle Bootstrap carousel slide event
            $(".carousel").attr("data-interval", "100");
        
    

输出