Bootstrap5 轮播方法

这些是标准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, …}
    });
});

尝试一下