Twitter Bootstrap Автозапуск карусели при загрузке

Ответ 1

вы должны сделать, поскольку Twitter Bootstrap Documentation говорит о Каруселе, поэтому установите первый элемент слайда карусели с class= "активным" и инициализируйте js для карусели таким образом:

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

тогда, если этого недостаточно (но это никогда не случалось со мной), используйте команду bruteforce, запускающую щелчок на кнопках управления карусели следующим образом:

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

но это всего лишь не необходимый трюк, действительно, просто следуйте за документацией!

Ответ 2

Simple. Вам не хватает атрибута data-ride в div.

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

Ответ 3

Как для документов, вам нужно инициализировать плагин Карусель через JavaScript. Пример карусели на официальной странице документации Bootstrap инициализируется в файле application.js на строках 67-68:

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

который дает ему настройки по умолчанию.

Если вы хотите указать интервал цикла, вы можете установить свойство interval в миллисекундах:

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

Ответ 4

Поместите его в готовый блок документа, чтобы он автоматически запускался для меня

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

Ответ 5

Вы можете использовать атрибут data-interval на разметке html для автоматического воспроизведения:

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

интервал данных: количество времени в миллисекундах для задержки между автоматическим циклированием элемента. Если false, карусель автоматически не будет циклически переключаться.

Ответ 6

<div id="myCarousel" class="carousel slide" data-ride="carousel"> работает для меня, то, что мне не хватало, был атрибут data-ride.

Надеюсь, это поможет многим людям. Спасибо, stackoverflow, вы были очень полезны для меня по большинству причин. Я рад, что это сообщество существует.

Ответ 7

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

ВАМ НУЖНО ДОБАВИТЬ

data-ride="carousel"

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

Ответ 8

Просто добавьте класс "слайд" в тег div карусели, например:

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