Карусель самозарядки не автоматически раздвигается

Я использую bootstrap на карусели Twitter (последняя версия), и у меня есть работа - за исключением того, что она не начинает автоматически скользить. Он работает хорошо после того, как вы нажали одну из кнопок навигации. Не знаю, почему это делается.

Здесь моя настройка JS в заголовке:

    <script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/jquery.js'; ?>"></script>

<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-carousel.js'; ?>"></script>
<script type="text/javascript" src="<?php echo tz_JS . '/bootstrap/bootstrap-transition.js'; ?>"></script>

И HTML:

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

    <div class="active item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>


    <div class="item">
    <div class="image-position-right">
        <a href="#"><img src="validimagelink.jpg" width="920" height="550" alt=""></a>
    </div>
    </div>

</div>

<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>

Также добавлено это безрезультатно:

<script>
$('#myCarousel').carousel({
    interval: 1200
});
</script>

После внесения вышеуказанного изменения консоль javascript сообщает:

Uncaught TypeError: Объект # не имеет метода "карусель" (анонимная функция) b.extend.ready jquery.min.js: 29 и

Любые мысли о том, почему это не сработало?

Ответы

Ответ 1

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

Если он все еще не работает, найдите потенциальные ошибки в консоли браузера (firebug/chrome..).

Для

Uncaught TypeError: Object # has no method 'carousel' (anonymous function) b.extend.ready jquery.min.js:29 u

Убедитесь, что:

Включен только один jQuery

Включен только один bootstrap-carousel.js или bootstrap.js.

Сначала включается jQuery, затем bootstrap-carousel.js или bootstrap.js, затем $(document).ready(...

Ответ 2

Иногда использование неправильной версии JQuery может влиять на действия карусели Boostrap от Twitters. В настоящее время они запускаются с версией v1.7.1, если вы используете разные, это может вызвать ошибки.

Если вы не используете v1.7.1, вы можете скачать его здесь:

http://code.jquery.com/jquery-1.7.1.min.js

Также убедитесь, что ваш код завернут в готовый документ:

  $(document).ready(function () {
      // code here
  });

Ответ 3

У меня была такая же проблема и я нашел решение; Поскольку мы оба помещаем 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 });
});

Иногда вам нужно поместить файл JavaScript после карусели. Фактически до конца страницы.

Ссылка: http://twitterbootstrap.org/twitter-bootstrap-3-carousel-not-automatically-starting/

Счастливое кодирование. Благодаря

Ответ 4

 <script language="javascript" type="text/javascript">
 $(window).load(function() 
 {       
     $("#slideshow > div:gt(0)").hide();
     setInterval(function() { 
       $('#slideshow > div:first')
       .fadeOut(750)
       .next()
       .fadeIn(1000)
       .end()
       .appendTo('#slideshow');
                            },  11000);
  });
</script>

Ответ 5

Если вы используете NgRoute, и вышеупомянутые решения не сработали для вас, обязательно включите следующий код javascript, расположенный на самой верхней части шаблона NgRoute, введет в <ng-view></ng-view>:

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

Также убедитесь, что jQuery включен первым до загрузки bootstrap.js. Это помогло мне, когда у меня возникла эта проблема в моем проекте.