Twitter Bootstrap Carousel自动播放加载

Question

使用twitter bootstrap框架，如何调用轮播到'自动幻灯片'。页面加载时的含义，轮播自动滚动。

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

Answer 1

你应该像Twitter Bootstrap Documentation所说的那样关注Carousel，所以设置第一个Carousel幻灯片项目 class =“active”并以这种方式初始化轮播的js：

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

然后如果它还不够（但这从来没有发生在我身上）使用bruteforce触发点击悬停旋转木马控制按钮，如下所示：

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

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

Answer 2

简单。你错过了＆＃34;数据搭载＆＃34; div中的属性。

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

Answer 3

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

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

，为其提供默认设置。

如果要指定周期间隔，可以设置interval属性（以毫秒为单位）：

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

Answer 4

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

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

Answer 5

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

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

Answer 6

您可以使用html标记上的数据间隔属性自动播放：

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

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

Answer 7

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

你需要添加

data-ride="carousel"

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

Answer 8

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

赞：

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

Answer 9

对于Bootstrap 4及更高版本：

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

Answer 10

只需添加课程＆＃34; slide＆＃34;到旋转木马div标签，像这样：

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