Twitter Bootstrap Карусель не запускается автоматически

Ответ 1

Предполагая, что у вас есть все остальное, попробуйте добавить это до закрытия тега body:

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

Ответ 2

У меня была такая же проблема и я нашел решение; Поскольку мы оба помещаем javascripts в конец страницы, вызов функции должен быть указан после них:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<script type="text/javascript">
  var $ = jQuery.noConflict();
  $(document).ready(function() { 
      $('#myCarousel').carousel({ interval: 3000, cycle: true });
  }); 
</script>

http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

Ответ 3

Думаю, я бы добавил что-то о загрузке 3, работающем в angular.

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

        <div class="mWeb-container" ng-controller="mWebCtrl">
        <div ng-include="nav_tpl" ng-hide="print_layout"></div>
        <div ng-include="carousel_tpl" ng-hide="print_layout"></div>
        <div ng-include="breadcrumbs_tpl" ng-hide="print_layout"></div>
        <div ng-view=""></div>
        <div ng-include="comments_tpl" ng-hide="print_layout"></div>
        <div ng-include="footer_tpl" ng-hide="print_layout"></div>
    </div>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="angular/scripts/vendor/bootstrap.min.js"></script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
            var mCarouselTO = setTimeout(function(){
            $('#Carousel').carousel({
                interval: 3000,
                cycle: true,
            }).trigger('slide');
            }, 2000);
            var q = mCarouselTO;
        });
    -->
    </script>

Ответ 4

У меня была такая же проблема, поэтому я обнаружил, что пропустил data-ride="carousel" из загрузочного караоке. Проверьте это в своем коде. Ссылка на файл Bootstrap

Ответ 5

Нет необходимости в каком-либо javascript-коде, вы можете настроить его на автоматическое изменение с помощью атрибута data data-interval="1000"

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

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

http://getbootstrap.com/javascript/#carousel

Ответ 6

Я сидел в течение нескольких месяцев на этом, каждый раз, когда я предварительно компилировал активы, что-то не так попало в общедоступную/папку активов, чтобы что-то не работало. Мне нужно было скопировать старые активы в папку public/assets, чтобы заставить ее работать. Долгое время я пытался выяснить, в каком порядке должен быть импорт, и который требует от заявлений уничтожать уже работающие вещи.

Мое решение после всего этого времени мне нужно импортировать:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

И никогда не ставьте script, например. start-carousel- script в файл application.js. Если я поместил его в файл application.html.erb следующим образом:

<%= javascript_include_tag "application" %>

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

Everthing отлично работает. Обратите внимание: в шляпе под приложение include_tag otherwhise я не могу работать.

Примечание 2: У меня есть googlemaps script, но он импортируется только (!) в файл, в котором живет карта. Это script:

<script src="https://maps.googleapis.com/maps/api/js?key=KEY&sensor=false"></script>

Я действительно надеюсь, что это поможет другим людям сэкономить свое время. Есть некоторые вещи, которые не так очевидны.

Ответ 7

Это случилось со мной. Но есть опция пауза: "hover", которая является настройкой по умолчанию.

И этот вариант заставил мой полноэкранный слайдер остановиться, конечно, даже на первом слайде;) Поэтому, пожалуйста, установите паузу в ложь или что-то еще, кроме "зависания".