Repository navigation
Carousel - is it possible to turn off keyboard navigation? #14468
Description
I am finding that I cannot turn off keyboard navigation within the carousel. The carousel panes are sliding/changing when I use the arrow keys and I can't find a way to turn this behavior off.
I can hook into .on('keydown.bs.carousel' event, but unfortunately, this fires after the carousel has executed both 'slide; and 'slid' events.
Is there another event I can hook into to determine how the carousel is being advanced?
Activity
cvrebert commentedon Aug 27, 2014
I suppose we could add a boolean
keyboardoption like the modal plugin has.Keep in mind that disabling keyboard control hurts accessibility for your users.
hnrch02 commentedon Aug 29, 2014
To completely disable keyboard navigation you could do this:
But that only works if you initialize the carousel yourself and do not rely on the data-api, because it waits for the page to load until the carousel is initialized and therefore you'd need to wrap it in a
$(window).on('load'), which is kinda messy. So I second akeyboardoption.Add `keyboard` option to carousel
fat commentedon Oct 3, 2014
you have several options:
$('#myCarousel').off('keydown.bs.carousel');'slide.bs.carousel'event$.fn.carousel.Constructor.prototype.keydown = function () {}It seems like a pretty rare case that you would want to turn accessibility off like this, so I'm not thrilled about adding an option for it
cvrebert commentedon Oct 3, 2014
At any rate, the new option to disable the carousel's handling of keyboard events was approved: #14590.
Add `keyboard` option to carousel
ugenegrg commentedon Sep 26, 2016
Allright, using data attr or via js, it works, but there is an strange issue in my case.
I have disabled the key reaction in caraousel which is working fine, but i have a popup in the lets's say 5th slide, and used the bootstrap modal for popup. Now the problem is when bootstrap modal is showing, the keyboard false does not prevent the carousel from sliding? Any help is appreciated. Also tried the solutions to prevent action using event listener and others as below.
window.addEventListener("keydown", function(e) { // space and arrow keys if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { e.preventDefault(); } }, false);By the way my pop modal is outside of the the carousel. It is just triggered from one of the carousel slide.