javascript - Twitter Bootstrap Carousel 加载时自动播放

Question

使用 twitter 引导框架，如何调用轮播来“自动滑动”。这意味着当页面加载时，轮播会自动滚动。

我已经为<a>下一个链接尝试了一个 javascript onLoad click 函数，但这没有用。

score 49 · Accepted Answer

您应该按照Twitter Bootstrap 文档中关于 Carousel 的说明进行操作，因此将第一个 Carousel 幻灯片项设置为class="active"并以这种方式初始化 carousel 的 js：

$(function(){
    $('.carousel').carousel({
      interval: 2000
    });
});

然后如果还不够（但这从来没有发生在我身上）使用蛮力触发点击悬停轮播控制按钮，如下所示：

$(function(){
$('.carousel').carousel({
      interval: 2000
    });
$('.carousel-control.right').trigger('click');
});

但这只是一个不需要的技巧，真的，只需按照文档！

score 24 · Accepted Answer

简单的。您在 div 中缺少“data-ride”属性。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

score 8 · Accepted Answer

根据文档，您需要通过 JavaScript 初始化 Carousel 插件。官方 Bootstrap 文档页面上的轮播示例在application.js文件的第 67-68 行初始化：

// carousel demo
$('#myCarousel').carousel()

这给了它默认设置。

如果要指定循环间隔，可以interval以毫秒为单位设置属性：

$('.carousel').carousel({
  interval: 2000
})

score 6 · Accepted Answer

将它放在文档就绪块中，让它为我自动启动

$(document).ready(function() {
$('#myCarousel').carousel();
});

score 3 · Accepted Answer

<div id="myCarousel" class="carousel slide" data-ride="carousel">对我有用，我一直缺少的是 data-ride 属性。

我希望这会帮助很多人。谢谢stackoverflow，在大多数情况下，您对我非常有用。很高兴这个社区存在。

score 1 · Accepted Answer

您可以使用 html 标记上的data-interval属性来自动播放：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="5000">

data-interval：自动循环项目之间的延迟时间（以毫秒为单位）。如果为 false，carousel 将不会自动循环。

score 1 · Accepted Answer

<header id="myCarousel" class="carousel slide">

您需要添加

data-ride="carousel"

<header id="myCarousel" class="carousel slide" data-ride="carousel">

score 1 · Accepted Answer

对于 Bootstrap 4 及更高版本：

$(function(){
    $('.carousel').carousel({
      interval: 2000,
      ride: 'carousel' // this is the important part
    });
});

score 1 · Accepted Answer

只需添加data-interval="5000"到div与 IP carouselExampleIndicators。

像这样：

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">

score -3 · Accepted Answer

只需将“幻灯片”类添加到轮播 div 标签中，如下所示：

<div class="carousel slide" id="this-carousel-id">

10 回答 10