mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 00:54:04 +02:00
Code Issues Releases Wiki Activity

Add keyboard option to carousel

Browse Source 
Also adds unit tests for keyboard events.

Fixes #14468.
This commit is contained in:
Heinrich Fenkart
2014-09-10 22:55:33 +02:00
parent e7b5c4c18b
commit 038a63b0eb
3 changed files with 90 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
js/tests/unit/carousel.js
View File

@@ -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 = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
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 = '<div id="myCarousel" class="carousel" data-interval="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
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 = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
+ '<div class="carousel-inner">'
+ '<div id="first" class="item active">'
+ '<img alt="">'
+ '</div>'
+ '<div id="second" class="item">'
+ '<img alt="">'
+ '</div>'
+ '<div id="third" class="item">'
+ '<img alt="">'
+ '</div>'
+ '</div>'
+ '</div>'
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 = '<div id="myCarousel" class="carousel" data-interval="false" data-pause="hover">'