Twitter Bootstrap Carousel 在加載時自動播放

Question

使用 twitter bootstrap 框架，如何調用輪播來“自動滑動”。 這意味着當頁面加載時，輪播會自動滾動。

我已經為下一個鏈接的<a>嘗試了一個 javascript onLoad 單擊函數，但這沒有用。

Answer 1

您應該按照Twitter Bootstrap 文檔中關於 Carousel 的說明進行操作，因此將第一個 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 文檔頁面上的輪播示例在application.js文件中的第 67-68 行初始化：

// 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">對我<div id="myCarousel" class="carousel slide" data-ride="carousel"> ，我一直缺少的是 data-ride 屬性。

我希望這會幫助很多人。 謝謝stackoverflow，在大多數情況下你對我都非常有用。 很高興這個社區存在。

Answer 6

您可以使用 html 標記上的data-interval屬性來自動播放：

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

data-interval ：自動循環項目之間延遲的時間量（以毫秒為單位）。 如果為 false，carousel 將不會自動循環。

Answer 7

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

你需要添加

data-ride="carousel"

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

Answer 8

只需使用 IP carouselExampleIndicators將data-interval="5000"到div 。

像這樣：

<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

只需將類“幻燈片”添加到輪播 div 標簽中，如下所示：

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