Johnny2k Johnny2k - 7 months ago 14
Javascript Question

Disable Keyevents for Bootstrap Carousel

I have a form in a Bootstrap Carousel. If the cursor is in an input field I cannot use the left and right button to move the cursor because they trigger the carousel to slide.

My question is how to disable the carousel movements when pressing any keys.

Answer

If you open up bootstrap.js, you will find this little snippet of code:

Carousel.prototype.keydown=function(e){
    switch(e.which){
        case 37:
            this.prev();
            break;

        case 39:
            this.next();
            break;

        default:
            return
    }

    e.preventDefault()
};

Commenting or removing it will solve your problem. But I dont want to change the library so I will have to wait for bootstrap team to fix it.

PS: try adding data-keyboard="false" into your class="carousel slide" element and see if it helps? Needs bootstrap 3.3.0 though

Comments