扫码一下
查看教程更方便
这些是标准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
});
});
此方法启动轮播以从左到右循环遍历项目。
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();
});
});
此方法可阻止轮播在项目之间循环。
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();
});
});
此方法将轮播循环到前一项。
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();
});
});
此方法将轮播循环到下一个项目
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();
});
});
当页面不可见或轮播或其父级不可见时,不要将轮播循环到下一个。
document.addEventListener("DOMContentLoaded", function(){
var element = document.getElementById("myCarousel");
// Create a carousel instance
var myCarousel = new bootstrap.Carousel(element);
myCarousel.nextWhenVisible();
});
此方法将轮播循环到特定帧(从 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);
});
});
此方法破坏元素的轮播(即删除存储在 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, …}
});
});
这是一个静态方法,它允许我们获取与 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, …}
});
});
这是一种静态方法,它允许我们获取与 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, …}
});
});