Bootstrap carousel not sliding

Question

I have been trying to use the Bootstrap Carousel and have been successful to some extent. I can click and change the images too. But I have got one problem. Its just not sliding! Where am I doing wrong?

html:

<div id="my_carousel" class="carousel slide">    <ol class="carousel-indicators">     <li data-target = "#my_carousel" data-slide-to = "0" class="active"></li>     <li data-target = "#my_carousel" data-slide-to = "1"></li>     <li data-target = "#my_carousel" data-slide-to = "2"></li>   </ol>    <div class="carousel-inner i">      <div class="item active">       <img src="images/f3.jpg" alt = "i1" class="img-responsive">     </div>      <div class="item">       <img src="images/f2.jpg" alt = "i2" class="img-responsive">     </div>      <div class="item">       <img src="images/f1.jpg" alt = "i3" class="img-responsive">     </div>    </div>    <a class="carousel-control left" href="#my_carousel" data-slide = "prev">     <span class="icon-prev left"></span>   </a>    <a class="carousel-control right" href="#my_carousel" data-slide = "next">     <span class="icon-next right"></span>   </a> </div> 

EDIT:

jquery:

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

Answer 1

Did you include this script:

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

And even it its not working, please check whether you are calling the above script before calling the jquery. So, it should be like this:

<!-- 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>   

Answer 2

I just recently downloaded bootstrap carousel (v3.2.0) it doesn't work with the newest version of jQuery (v1.11) because of this line:

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

The part $.support.transition was for jQuery internal use and has been deprecated, removing just that should allow your code to work again. Better yet, you could/should replace it with Modernizr's feature detection property: Modernizr.csstransitions.

UPDATE: Also jQuery v11.1 does not support .emulateTransitionEnd. To solve these issues make sure you include transition.js in your package. It contains the following code:

+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);