Twitter Bootstrap Carousel自动播放加载

Question

使用twitter bootstrap框架,如何调用轮播到"自动滑动".页面加载时的含义,轮播自动滚动.

我已尝试使用javascript onLoad点击功能进行<a>下一个链接,但这不起作用.

Answer 1

你应该按照Twitter Bootstrap文档说的Carousel 来做,所以设置第一个带有class ="active"的 Carousel幻灯片项,并以这种方式初始化轮播的js:

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

然后,如果它还不够(但这从来没有发生在我身上)使用暴力触发点击悬停旋转木马控制按钮,如下所示:

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

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

Answer 2

简单.你错过了div中的"data-ride"属性.

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

Answer 3

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

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

这给了它默认设置.

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

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

Answer 4

把它放在document-ready-block中让它自动启动

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