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

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

方法一：我们可以通过使用每个carousel item的data interval属性来控制动画。给定的例子是理解这个概念的最好例子。 Data-interval 属性用于设置两个轮播项之间的间隔时间，默认值为 3000 毫秒。

HTML

 

    
    
    
    
    
    
    
    
 
    geeksforgeeks

 

    
        
            
            
            
        
        
            
                
            
            
                
            
            
                
            
        
        
            
            Previous
        
        
            
            Next
        
    

 

输出：

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

句法

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

HTML

 

    
    
    
    
    
    
    
    
 
    geeksforgeeks

 

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

 

输出：

方法三：我们可以通过data-attribute和javascript来设置data-interval。这种方法很简单，就像上面两种方法一样。在这种方法中，我们将选择轮播类 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");
        
    

输出

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器