Bootstrap carousel not sliding

Bootstrap carousel not sliding

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?



Solution 1:

Did you include this script:

<script language="JavaScript" type="text/javascript">
      interval: 2000


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">
      interval: 3000

Solution 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:

Related:  Bootstrap - Removing padding or margin when screen size is smaller
+function ($) {
  'use strict';

  // ============================================================

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

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

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

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

  $.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 ($( return e.handleObj.handler.apply(this, arguments)


Solution 3:

Bootstrap.js uses functions from jQuery.js

so you should load jQuery.js before Boostrap.js

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

Plugin dependencies

Some plugins and CSS components depend on other
plugins. If you include plugins individually, make sure to check for
these dependencies in the docs. Also note that all plugins depend on
jQuery (this means jQuery must be included before the plugin files).
Consult our bower.json to see which versions of jQuery are supported.

Solution 4:

Ryan Taylor’s answer helped me with this problem, but instead of removing the check for $.support.transition from carousel.js, I added this little patch JS to my build to fill the gap left by jQuery:

Related:  How to set up fixed width for ?

Solution 5:

You shouldn’t need the javascript. The following should be enough,

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

Solution 6:

Make sure you include this link

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