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>

Can you please give us the code where you are including all your js code ? — , Mar 03 '14 at 16:43
Warning to readers: make sure you also add the class "slide" to the carousel div, otherwise you will experience the same symptoms (images change but are not animated). A similar problem was posted and solved (see the second comment) in this thread: http://stackoverflow.com/questions/10660718/twitter-bootstrap-carousel-not-sliding — Marco Panichi, Apr 30 '16 at 14:08

score 25 · Accepted Answer · edited Aug 19 '21 at 17:12

25

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>

edited Aug 19 '21 at 17:12

Web Developer

333
4
17

answered Mar 03 '14 at 16:40

Kakar

5,354
10
55
93

1

Yes, I did. But its just not responding. – Robin Mar 03 '14 at 16:42
3

That was the problem. I was calling the script before loading the `jquery`. Its working now. Thank you so much! – Robin Mar 03 '14 at 16:49
1

Only for information purposes to future visitors: `script language="JavaScript"` is deprecated. Use `type="text/javascript` instead. Or, if you're dealing with HTML 5, there's no need to use any of them. – undefined is our god Oct 16 '15 at 16:05
1

when I am adding boostrap.min.js in my sample very next to jquery.js and run it's not functioning. I am curious on that. i used jquery - 2.2.3v and bootstrap - 3.3.6v. – dush88c Dec 23 '16 at 11:48

Ryan Taylor · Answer 2 · 2015-02-05T17:39:10.740

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

score 2 · Answer 3 · answered Mar 03 '14 at 16:58

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.

http://getbootstrap.com/javascript/

score 1 · Answer 4 · answered Jan 28 '15 at 17:19

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:

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

score 1 · Answer 5 · answered Dec 20 '17 at 17:19

1

I had the same problem and I was able to get it working by adding this snippet to my code.

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

answered Dec 20 '17 at 17:19

kupaff

329
4
5

This question was already solved and the OP said his mistake was including jQuery after Bootstrap, so why bother answering it? – j08691 Dec 20 '17 at 17:25

score 0 · Answer 6 · answered Feb 28 '16 at 15:47

0

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

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

answered Feb 28 '16 at 15:47

mre

43,520
33
120
170

score 0 · Answer 7 · edited Feb 11 '17 at 20:23

0

Make sure you include this link

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

edited Feb 11 '17 at 20:23

Tunaki

132,869
46
340
423

answered Feb 11 '17 at 20:16

Xcoder

81
1
3

score 0 · Answer 8 · answered Nov 28 '17 at 17:10

Strange, but if I RemoveData() and re-initialize carousel, it works like a charm

//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);
});

score 0 · Answer 9 · answered Jun 26 '20 at 15:12

A couple of things to check if this happens to you:

Is the Bootstrap JS file deferred? If so, try removing the "defer"
ie. <script defer src="bootstrap.min.js">
Is there another slider/carousel script? Owl Carousel, for example, may interfere with Bootstrap Carousel

Bootstrap carousel not sliding

9 Answers9

Linked