carousel: correctly reset when the slide event is prevented

js/carousel.js

@@ -111,14 +111,16 @@
       $next = this.$element.find('.item')[fallback]()
     }
 
+    if ($next.hasClass('active')) return
+
+    var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
+    this.$element.trigger(e)
+    if (e.isDefaultPrevented()) return
+
     this.sliding = true
 
     isCycling && this.pause()
 
-    var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
-
-    if ($next.hasClass('active')) return
-
     if (this.$indicators.length) {
       this.$indicators.find('.active').removeClass('active')
       this.$element.one('slid', function () {
@@ -128,8 +130,6 @@
     }
 
     if ($.support.transition && this.$element.hasClass('slide')) {
-      this.$element.trigger(e)
-      if (e.isDefaultPrevented()) return
       $next.addClass(type)
       $next[0].offsetWidth // force reflow
       $active.addClass(direction)
@@ -143,8 +143,6 @@
         })
         .emulateTransitionEnd(600)
     } else {
-      this.$element.trigger(e)
-      if (e.isDefaultPrevented()) return
       $active.removeClass('active')
       $next.addClass('active')
       this.sliding = false

js/tests/unit/carousel.js

@@ -16,7 +16,7 @@ $(function () {
         ok($(document.body).carousel()[0] == document.body, 'document.body returned')
       })
 
-      test("should not fire sliden when slide is prevented", function () {
+      test("should not fire slid when slide is prevented", function () {
         $.support.transition = false
         stop()
         $('<div class="carousel"/>')
@@ -31,6 +31,29 @@ $(function () {
           .carousel('next')
       })
 
+      test("should reset when slide is prevented", function () {
+        var template = '<div id="carousel-example-generic" class="carousel slide"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="item active"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div><div class="item"><div class="carousel-caption"></div></div></div><a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"></a></div>'
+        var $carousel = $(template)
+        $.support.transition = false
+        stop()
+        $carousel.one('slide.bs.carousel', function (e) {
+          e.preventDefault()
+          setTimeout(function () {
+            ok($carousel.find('.item:eq(0)').is('.active'))
+            ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'))
+            $carousel.carousel('next')
+          }, 1);
+        })
+        $carousel.one('slid.bs.carousel', function () {
+          setTimeout(function () {
+            ok($carousel.find('.item:eq(1)').is('.active'))
+            ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'))
+            start()
+          }, 1);
+        })
+        $carousel.carousel('next')
+      })
+
       test("should fire slide event with direction", function () {
         var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
         $.support.transition = false