Карусель не загружается

Ответ 1

Вы включили этот script:

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

Edit

И даже если он не работает, проверьте, вызываете ли вы выше script перед вызовом jquery. Итак, это должно быть так:

<!-- Calling jquery first -->
<script language="JavaScript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="scripts/bootstrap.min.js"></script>
  <!-- Carousel -->
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel({
      interval: 3000
    })
  });    
</script>  

Ответ 2

Недавно я загрузил bootstrap carousel (v3.2.0), он не работает с самой новой версией jQuery (v1.11) из-за этой строки:

if ($.support.transition && this.$element.hasClass('slide')) {

Часть $.support.transition была для внутреннего использования jQuery и устарела, удаляя только это, что должно позволить вашему коду работать снова. Еще лучше, вы могли/должны заменить его свойством обнаружения свойств Modernizr: Modernizr.csstransitions.

UPDATE: Также jQuery v11.1 не поддерживает .emulateTransitionEnd. Чтобы решить эти проблемы, убедитесь, что включает в себя пакет transition.js в вашем пакете. Он содержит следующий код:

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);

Ответ 3

Bootstrap.js использует функции из jQuery.js

поэтому вы должны загрузить jQuery.js перед Boostrap.js

<script src="jQuery.js"></script>
<script src="bootstrap.js></script>

Зависимости плагинов

Некоторые плагины и компоненты CSS зависят от других плагины. Если вы включаете плагины в отдельности, обязательно проверьте эти зависимости в документах. Также обратите внимание, что все плагины зависят от jQuery (это означает, что jQuery должен быть включен перед файлами плагина). Обратитесь к нашему bower.json, чтобы узнать, какие версии jQuery поддерживаются.

http://getbootstrap.com/javascript/

Ответ 4

Ответ Ryan Taylor помог мне с этой проблемой, но вместо удаления проверки для $.support.transition из carousel.js, я добавил этот небольшой патч JS в мою сборку, чтобы заполнить пробел, оставленный jQuery:

https://gist.github.com/jonraasch/373874#file-jquery-support-transition-js

Ответ 5

Вам не нужен javascript. Достаточно следующего:

<div id="my_carousel" class="carousel slide container" data-ride="carousel">

Ответ 6

Убедитесь, что вы указали эту ссылку

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

Ответ 7

Странно, но если я RemoveData() и повторно инициализирую карусель, он работает как шарм

//Function to animate slider captions
function doAnimations(elems) {
    //Cache the animationend event in a variable
    var animEndEv = 'webkitAnimationEnd animationend';

    elems.each(function () {
        var $this = $(this),
            $animationType = $this.data('animation');
        $this.addClass($animationType).one(animEndEv, function () {
            $this.removeClass($animationType);
        });
    });
}


//Variables on page load
var $myCarousel = $('#myCarousel'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

//Initialize carousel
$myCarousel.carousel();

//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);

// --------------------------------------------------
//Pause carousel and remove data
$myCarousel.carousel('pause').removeData();

//Re-initialize carousel
$myCarousel.carousel();

//Animate captions in first slide on page load
doAnimations($firstAnimatingElems);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

//Other slides to be animated on carousel slide event
$myCarousel.on('slide.bs.carousel', function (e) {
    var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
    doAnimations($animatingElems);
});

Ответ 8

У меня была та же проблема, и я смог заставить ее работать, добавив этот фрагмент в свой код.

  <script>
        $(function(){
            // Activate Carousel
            $("#myCarousel").carousel();
        });
    </script>