I want my bootstrap carousel to slide when keyboard left and right arrows are pressed

Question

I have a carousel with images inside a modal window. I want the images to slide back and forth when I press the left/right arrow keys on the keyboard. According to the bootstrap carousel documentation the data-keyboard attribute default value is true, but nothing happens when I press the arrow keys! So I tried putting the attribute in the code and still nothing happens when I press left/right arrow keys.

Question - Should the pics slide back and forth automatically with a left/right keyboard press? If yes, then I have something messed up, if no, do I need some JS carousel event captured and then slide manually with js/jquery?

Here is my code!

 <div class="modal" id="profileImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">@*<span aria-hidden="true">&times;</span>*@<i class="fa fa-flag-o" aria-hidden="true"></i> </button> <h4 class="modal-title">Image Removal</h4> </div> <div class="modal-body" style="text-align: center;"> <div id="carousel-example-generic" data-interval="false" data-keyboard="true" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> @for (int i = 0; i < Model.YogaProfileImages.Count(); i++) { var profileImageId=@ Model.YogaProfileImages.ElementAt(i).YogaProfileImageId; <li data-target="#carousel-example-generic" data-slide-to="@i" class="@(ViewBag.SelectedImageId == profileImageId ? " active " : " ")"> </li> } </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> @for (int i = 0; i < Model.YogaProfileImages.Count(); i++) { var profileImageId=@ Model.YogaProfileImages.ElementAt(i).YogaProfileImageId; <div id=@profileImageId class="item @(ViewBag.SelectedImageId == profileImageId ? " active " : " ")" data-profileId="@Model.Id"> <img style="display: block; margin: auto; border-radius: 6px;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.YogaProfileImages.ElementAt(i).CroppedImage)))" alt="profile image"> </div> } </div> </div> </div> <div class="modal-footer" style="text-align: center; border-top: none;"> <input id="deleteModalWarningClose" type="button" class="btn btn-lg btn-primary" value="Close" /> </div> </div> </div> </div>

Answer 1

Please make your code example work to get a better answer. But upto now it seems like this could help you:

$(document).keydown(function(e) {
    if (e.keyCode === 37) {
       // Previous
       $(".carousel-control.left").click();
       return false;
    }
    if (e.keyCode === 39) {
       // Next
       $(".carousel-control.right").click();
       return false;
    }
});

Answer 2

I would use some jquery event listenner such as .on('keyup', somefunction()) see documentation here and in this function if right arrow was pressed I would increment an index that would "lead" to the image I would want my carousel to show. The same thing applies to left arrow being pressed but in this situation I would decrease the index. If I didn't get your problem correctly let me know.

Answer 3

For me this worked =>

<script>
    $(".carousel").carousel({
        interval: 6000,
        keyboard: true
    });
</script>

But it only worked when i have added left & right control arrows on the image and pressed one of the arrows at least once. After that i could use the left and right arrows on the keyboard to slide the images.