Как я могу заставить карусель Bootstrap js автоматически переключаться, как только страница загружается?

Ответ 1

Примечание. Как уже упоминалось в комментариях, это решение будет корректно работать для Bootstrap 2. Обратитесь к ответу MattZ за инструкциями о том, как выполнить одно и то же поведение в Bootstrap 3.

У меня была такая же проблема, как и вы и все, что мне нужно было сделать, чтобы исправить это было вызвано методом карусели ( "цикл" ) после того, как я инициализировал карусель:

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>  

Я понимаю, что этот вопрос старый, но сегодня я собирался погулять, пытаясь понять это сам и увидел, что никто не ответил на него должным образом. Главный голосовой ответ не будет автоматически запускать карусель, он будет циклироваться только после нажатия кнопки, которая не является тем, что искали OP.

Ответ 2

В Bootstrap 3.0 это можно сделать, добавив в контейнер карусели атрибут data-ride:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        ...
    </div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

Ответ 3

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

Ответ 4

Файл jquery.js должен загружаться до загрузки bootstrap.js, независимо от того, помещены ли они в теги заголовка или в конце вашего файла.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>

Ответ 5

В Bootstrap 3.0 это можно сделать, добавив в контейнер карусели атрибут data-ride:

Ответ 6

Попробуйте инициализировать вашу карусель следующим образом:

$('.carousel').carousel().next();

Ответ 7

Быстрое и грязное решение заключается в программном нажатии кнопки на готовом документе:

$(function() {
  $(".right.carousel-control").click();
});

BTW: убедитесь, что вы загрузили jQuery перед другими скриптами, ссылающимися на $, прямо сейчас у вас есть два Uncaught ReferenceError: $ is not defined, потому что вы вызываете $в строке 101 и 182, но jquery сначала загружается в строке 243.

Я бы рекомендовал использовать такой инструмент, как firebug или инструмент разработчика (хром/сафари), чтобы поймать эти ошибки.

EDIT: Я думаю, что у вас уже есть рабочее решение, но поскольку вы используете jquery перед загрузкой, он не работает.

Ответ 8

Не уверен, что вы разобрались, но у меня тоже была эта проблема. Я разрешил это, завернув настройку интервала карусели в такую ​​функцию:

!function ($) {
$(function() {
    $('.carousel').carousel({ interval: 3000 })
});
}(window.jQuery);

Ответ 9

если ни одно из этих решений не работает для вас. попробуйте следующее:

$(document).ready(function () {
  function playcarousel(){
    $('.carousel-control.right').trigger('click');
  } 
  window.setInterval(playcarousel, 4000); 
});

Ответ 10

Это решение, которое сработало для меня на основе ответа Джесси Картера на этот вопрос. Я понятия не имею, почему это работает, но по какой-то причине ему нужны 2 вызова, один внутри документа, который готов, а другой - снаружи. Если я удалю их из них, что-то пойдет не так, например, функция паузы не может работать должным образом или автоматическая цикличность. Кроме того, интервал, похоже, работает внутри документа. Комментарии от javascript глав наиболее приветствуются;-), но я подозреваю, что эта область T.B. не является полной ошибкой! Я использую 2.0.2, который, как я знаю, немного позади (текущая версия теперь 2.0.4), но я не вижу никаких изменения в этой области

jQuery(document).ready(function () {
    jQuery('#myCarousel').carousel(
    {
    interval:2000
    });
});

jQuery('#myCarousel').carousel();

Ответ 11

Правильный способ исправить это - добавить "активный" класс к первому изображению в карусели при ее создании. Это приведет к тому, что карусель начнет ездить на велосипеде как можно скорее.

Вот пример:

    <div class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>

Ответ 12

Несмотря на то, что здесь, несомненно, есть правильные ответы, я просто хотел добавить, что вы можете воспроизвести точное поведение, как описывает плакат, добавив ошибки в ваш код. Удалите точки с запятой или конечный тег script, например, и карусель больше не будет автопилотом.

Итак, первое, что вам нужно сделать - это искать ошибки в консоли javascript!

Ответ 13

Попробуйте это.

$(document).ready(function ()
{
    $('.carousel').carousel({interval:5000,pause:false});
});

Ответ 14

    <div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
               <img src="img1" class="img-responsive" alt="stuff1" > 
              </div>
              <div class="item">
               <img src="img2" class="img-responsive" alt="stuff2" > 
              </div>
            </div>
           <!-- Controls-->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a> 
          </div>

 <!--This script should be at the very bottom of the page (footer works for me)-->  
    <script>
    $('#myCarousel').carousel
    ({
        interval: 2000,


        })

    </script>

Ответ 15

Есть еще один способ автоматического цикла карусели бутстрапа.

используйте атрибут data-ride="carousel". Он сообщает бутстрапу начать анимацию карусели сразу же при загрузке страницы.