Twitter Bootstrap Carousel 加载时自动播放

Posted 2023-02-16

【中文标题】Twitter Bootstrap Carousel 加载时自动播放

【英文标题】：Twitter Bootstrap Carousel autoplay on load

【发布时间】：2012-11-11 14:13:44

【问题描述】：

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

我已经为下一个链接的<a> 尝试了一个javascript onLoad 点击函数，但这不起作用。

【问题讨论】：

它应该会自动开始播放，而无需您做任何事情。你可以手动点击上一个/下一个链接，它可以工作吗？

CoffeeScript 自动播放：$ -> $('#myCarousel').carousel()

简单地将单词'auto'添加到div类

How can I make the boostrap js carousel automatically cycle as soon as the page loads?的可能重复

【参考方案1】：

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

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

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

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

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

【讨论】：

@merv 真诚地说，我从来没有遇到过轮播问题，只是按照引导文档所说的去做

显然，我的第一条评论的时间表明它指的是您答案的原始编辑，其中确实有错误的信息。虽然后来的修订更正确，但我仍然不明白为什么要提到人为触发的事件。

我发现如果您将其中一个 img 项目设置为 class="active" 您不需要使用该技巧来触发下一张幻灯片。

@MegaTux 是的，确实，只需使用它，不需要“我的”技巧，轮播默认启动，然后 class=active sets 这是您要显示的第一张图片；）

@Eirenaios - 绝非超级棒。如果您需要它，它只会隐藏代码中的另一个问题。如果是这样，你应该解决原来的问题，而不是用诡计来掩盖你的烂摊子。相信我，它会回来咬你的。它总是这样。

【参考方案2】：

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

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

【讨论】：

喜欢 css 方法。

【参考方案3】：

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

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

这给了它默认设置。

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

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

【讨论】：

作为一个完全相关的答案，具有适当数量的背景信息支持的准确信息，这应该是公认的答案。

【参考方案4】：

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

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

【参考方案5】：

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

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

【参考方案6】：

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

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

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

【讨论】：

即使我使用了上述设置，我的轮播也遇到了问题..它没有按预期出现并且最初没有启动轮播

【参考方案7】：

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

你需要添加

data-ride="carousel"

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

【参考方案8】：

只需将data-interval="5000" 添加到div，IP 为carouselExampleIndicators。

像这样：

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

【参考方案9】：

对于 Bootstrap 4 及更高版本：

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

【参考方案10】：

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

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

【讨论】：

-1 只启用css过渡功能，但仍然不初始化Carousel插件，这是必需的。