Disable keyboard on Bootstrap 3 carousel

Question

The problem:

I'm building a photo gallery and I need to paginate the thumbnails. So, I put all the thumbnails inside a carousel and by clicking the arrows I change the page. So far, so good.

I need to be able to move through the thumbnails with the keyboard arrows. The problem is that the carousel itself has a keydown bind. So if for example I click on an arrow, the page changes but then, if a press a keyboard's arrow, I trigger the keydown of the carousel, which I don't want to.

The question:

Is there a way to disable the keydown of the carousel without modify the bootstrap.js? Because I'm using it through a CDN.

In the carousel.js I found this:

...
var Carousel = function (element, options) {
    this.$element    = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
...
Carousel.prototype.keydown = function (e) {
    switch (e.which) {
      case 37: this.prev(); break
      case 39: this.next(); break
      default: return
    }

    e.preventDefault()
}

But I don't know how to override it. I tried with $('.carousel').off('keydown'); and $('.carousel').off('keydown.bs.carousel'); but nothing happened.

I leave you a simplify version of my thumbnails for you to try: JSFiddle.

I'm confused. You say you want to move through the carousel using the keyboard arrows, and the carousel provides that functionality, yet you want to disable the code that does that work for you? Why do you want to disable functionality that you need? — drneel, Aug 18 '14 at 11:07
@drneel Sorry, that might be confused. I want to be able to move through the thumbnails, not through the carousel pages. If I click on the thumbnail #1 and press the right arrow, I want to go to the thumbnail #2, not to the 2nd page. That's why I need to disable the carousel functionality. — azeós, Aug 18 '14 at 16:59
FYI this was a bug that caused the `data-keyboard='false'` not to work - it has been fixed in 3.3.0 — Muleskinner, Dec 15 '14 at 22:38

score 1 · Accepted Answer · answered Aug 27 '14 at 03:18

1

$.fn.carousel.Constructor.prototype.keydown=function(){}; before ….carousel() did the trick for me.

Bootstrap 3.2.0
jQuery 1.11.1

answered Aug 27 '14 at 03:18

vike

339
6
10

Thanks mate! I put that line after the bootstrap.js, because that's where I have my js code, and it works. What does `$.fn`? – azeós Aug 27 '14 at 19:39
Never mind, I found the answer [here](http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean) and [here](http://stackoverflow.com/questions/1755080/why-jquery-do-this-jquery-fn-init-prototype-jquery-fn). Thanks again. – azeós Aug 28 '14 at 00:43

Disable keyboard on Bootstrap 3 carousel

1 Answers1