bootstrap5 轮播方法——迹忆客-ag捕鱼王app官网

这些是标准bootstrap程序的轮播方法

传递选项

您还可以使用选项对象将选项传递给 carousel()方法。

以下示例将关闭轮播中的自动滑动。 默认情况下，bootstrap 轮播会在页面加载时自动开始播放或滑动。

document.addeventlistener("domcontentloaded", function(){
    var element = document.getelementbyid("mycarousel");
    var mycarousel = new bootstrap.carousel(element, {
        interval: false
    });
});

以下示例将在到达最后一张幻灯片后停止轮播自动滑动。

document.addeventlistener("domcontentloaded", function(){
    var element = document.getelementbyid("mycarousel");
    var mycarousel = new bootstrap.carousel(element, {
        wrap: false
    });
});

cycle

此方法启动轮播以从左到右循环遍历项目。

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    // create a carousel instance
    var mycarousel = new bootstrap.carousel(element);
    btn.addeventlistener("click", function(){
        mycarousel.cycle();
    });
});

pause

此方法可阻止轮播在项目之间循环。

document.addeventlistener("domcontentloaded", function(){
   var btn = document.getelementbyid("mybtn");
   var element = document.getelementbyid("mycarousel");
   // create a carousel instance
   var mycarousel = new bootstrap.carousel(element);
   btn.addeventlistener("click", function(){
       mycarousel.pause();
   });
});

prev

此方法将轮播循环到前一项。

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    // create a carousel instance
    var mycarousel = new bootstrap.carousel(element);
    btn.addeventlistener("click", function(){
        mycarousel.prev();
    });
});

next

此方法将轮播循环到下一个项目

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    // create a carousel instance
    var mycarousel = new bootstrap.carousel(element);
    btn.addeventlistener("click", function(){
        mycarousel.next();
    });
});

nextwhenvisible

当页面不可见或轮播或其父级不可见时，不要将轮播循环到下一个。

document.addeventlistener("domcontentloaded", function(){
    var element = document.getelementbyid("mycarousel");
    // create a carousel instance
    var mycarousel = new bootstrap.carousel(element);
    mycarousel.nextwhenvisible();
});

to

此方法将轮播循环到特定帧（从 0 开始，类似于数组）。

document.addeventlistener("domcontentloaded", function(){
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    // create a carousel instance
    var mycarousel = new bootstrap.carousel(element);
    btn.addeventlistener("click", function(){
        mycarousel.to(2);
    });
});

dispose

此方法破坏元素的轮播（即删除存储在 dom 元素上的数据）。

document.addeventlistener("domcontentloaded", function() {
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    btn.addeventlistener("click", function(){
        var mycarousel = bootstrap.carousel.getinstance(element);
        console.log(mycarousel);
        // {_element: div#mycarousel.carousel.slide, _items: array(3), _interval: 9, _activeelement: div.carousel-item.active, _ispaused: false, …}
        
        mycarousel.dispose();
        console.log(mycarousel);
        // {_element: null, _items: null, _interval: null, _activeelement: null, _ispaused: null, …}
    });
});

getinstance

这是一个静态方法，它允许我们获取与 dom 元素关联的轮播实例。

document.addeventlistener("domcontentloaded", function() {
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    btn.addeventlistener("click", function() {
        var mycarousel = bootstrap.carousel.getinstance(element);
        console.log(mycarousel);
        // {_element: div#mycarousel.carousel.slide, _items: array(3), _interval: 9, _activeelement: div.carousel-item.active, _ispaused: false, …}
    });
});

getorcreateinstance

这是一种静态方法，它允许我们获取与 dom 元素关联的轮播实例，或者在轮播未初始化的情况下创建一个新的实例。

document.addeventlistener("domcontentloaded", function() {
    var btn = document.getelementbyid("mybtn");
    var element = document.getelementbyid("mycarousel");
    btn.addeventlistener("click", function() {
        var mycarousel = bootstrap.carousel.getorcreateinstance(element);
        console.log(mycarousel);
        // {_element: div#mycarousel.carousel.slide, _items: array(3), _interval: 9, _activeelement: div.carousel-item.active, _ispaused: false, …}
    });
});