Carousel - is it possible to turn off keyboard navigation?

[ghost]

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?

[cvrebert]

I suppose we could add a boolean keyboard option like the modal plugin has.
Keep in mind that disabling keyboard control hurts accessibility for your users.

[ghost]

I realize it could hurt accessibility - but I would think that depends on how the carousel is being used. In my case, I have input controls in the item panes, and when I try to edit those inputs and navigate through the input via the arrow keys, I am running into major problems.
Then again, maybe I just need to capture the keypress events on those inputs and not propagate them them further.

....After further thought, my particular application does not benefit from the arrow navigation and it is confusing for it to exhibit this behavior. I don't have to be focused on an input for the arrow keys to actively navigate, so not sure how I am going to resolve this issue. Any hints or suggestions are welcome.

I wish I could key into what caused the slid or slid event and decide any further action from there.

[ghost]

My solution to the issue was to capture the keydown event on the input control. Still seems odd how the carousel covers up this behavior, but this is an easy enough workaround. I also still have that arrow key navigation/accessibility goodness.

   $(mySelector).on('keydown', function (e) {
        if (e.keyCode >= 37 && e.keyCode <= 40) {
            e.stopPropagation();
        }
    });

[hnrch02]

To completely disable keyboard navigation you could do this:

$('#myCarousel').off('keydown.bs.carousel');

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 a keyboard option.

[fat]

you have several options:

1. $('#myCarousel').off('keydown.bs.carousel');
2. preventDefault on the 'slide.bs.carousel' event
3. $.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

[ghost]

It might be a rare case - but I didn't think it was that odd to re-purpose a standard carousel control into a content container that was controlled by the navigational elements.

[cvrebert]

At any rate, the new option to disable the carousel's handling of keyboard events was approved: #14590.

[ugenegrg]

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.