fixes #9461 - Make carousel ignore non-items in carousel-inner

2 files changed, 29 insertions, 1 deletions

diff --git a/js/carousel.js b/js/carousel.js
index 19e9af1ed..6d6fa0aee 100644
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -48,7 +48,7 @@
 
   Carousel.prototype.getActiveIndex = function () {
     this.$active = this.$element.find('.item.active')
-    this.$items  = this.$active.parent().children()
+    this.$items  = this.$active.parent().children('.item')
 
     return this.$items.index(this.$active)
   }
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 6f69855c7..562e30255 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -107,4 +107,32 @@ $(function () {
     ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options')
     $('#myCarousel').remove()
   })
+
+  test('should skip over non-items', function () {
+    $.support.transition = false
+
+    var $template = $(
+        '<div id="myCarousel" class="carousel" data-interval="1814">'
+      + '<div class="carousel-inner">'
+      + '<div class="item active">'
+      + '<img alt="">'
+      + '</div>'
+      + '<script type="text/x-metamorph" id="thingy"></script>'
+      + '<div class="item">'
+      + '<img alt="">'
+      + '</div>'
+      + '<div class="item">'
+      + '</div>'
+      + '</div>'
+      + '</div>'
+    )
+
+    $template.carousel()
+
+    equal($template.find('.item')[0], $template.find('.active')[0], 'the first carousel item should be active')
+
+    $template.carousel(1)
+
+    equal($template.find('.item')[1], $template.find('.active')[0], 'the second carousel item should be active')
+  })
 })