diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index 23f9af97af..62adc09e6f 100644
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -178,6 +178,12 @@ $('.carousel').carousel()
true |
Whether the carousel should cycle continuously or have hard stops. |
+
+ keyboard |
+ boolean |
+ true |
+ Whether the carousel should react to keyboard events. |
+
diff --git a/js/carousel.js b/js/carousel.js
index 4c9a1165ce..b688990095 100644
--- a/js/carousel.js
+++ b/js/carousel.js
@@ -14,7 +14,7 @@
// =========================
var Carousel = function (element, options) {
- this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
+ this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
@@ -23,6 +23,8 @@
this.$active =
this.$items = null
+ this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
+
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
@@ -35,7 +37,8 @@
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
- wrap: true
+ wrap: true,
+ keyboard: true
}
Carousel.prototype.keydown = function (e) {
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 64d2144628..6f0b9642fc 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -399,6 +399,85 @@ $(function () {
strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
})
+ test('should go to previous item if left arrow key is pressed', function () {
+ var templateHTML = ''
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ var $template = $(templateHTML)
+
+ $template.bootstrapCarousel()
+
+ strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+
+ $template.trigger($.Event('keydown', { which: 37 }))
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+ })
+
+ test('should go to next item if right arrow key is pressed', function () {
+ var templateHTML = ''
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ var $template = $(templateHTML)
+
+ $template.bootstrapCarousel()
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+
+ $template.trigger($.Event('keydown', { which: 39 }))
+
+ strictEqual($template.find('.item')[1], $template.find('.active')[0], 'second item active')
+ })
+
+ test('should support disabling the keyboard navigation', function () {
+ var templateHTML = ''
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ + '
'
+ var $template = $(templateHTML)
+
+ $template.bootstrapCarousel()
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item active')
+
+ $template.trigger($.Event('keydown', { which: 39 }))
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
+
+ $template.trigger($.Event('keydown', { which: 37 }))
+
+ strictEqual($template.find('.item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
+ })
+
test('should only add mouseenter and mouseleave listeners when not on mobile', function () {
var isMobile = 'ontouchstart' in document.documentElement
var templateHTML = ''