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 = '