Question

I use boostrap carousel inside of a modal window.

Code of that looks like this:

<div id="modal-window-slideshow" data-backdrop="static" class="modal-huge hide fade">
  <div class="modal-header">
    <button type="button" data-dismiss="modal" class="close" aria-hidden="true">×</button>
    <h3>Slides</h3>
  </div>
  <div class="modal-huge-body">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel items -->
      <div id="div-carousel-items" class="carousel-inner">

      <!-- Carousel nav -->
      <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
      <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
    </div>
  </div>
</div>

When user clicks next and prev buttons everything works fine. But i also want to allow user to navigate via left and right arrows on keyboard. I wrote code which does it, but i met strange problem: transitions animation in this case doesn’t work. Can i enable that?

My script

$(document).keypress(function(event) {
  var LEFT_ARROW = 39; var RIGHT_ARROW = 37;

  if (typeof event !== 'undefined' && $('#modal-window-slideshow').is(':visible')) {
    if (event.keyCode === RIGHT_ARROW) {
      $(this).carousel('next');
    }

    if (event.keyCode === LEFT_ARROW) {
      $(this).carousel('prev');
    }
  }
  return true;
});

Answer 1

I think, i found the workaround. I just seek necessary links and then click it.

$(document).keypress(function(event) {
    var LEFT_ARROW = 39; var RIGHT_ARROW = 37;

    if (event.keyCode === RIGHT_ARROW) {
      $('a.carousel-control.right').trigger('click');
    }

    if (event.keyCode === LEFT_ARROW) {
      $('a.carousel-control.left').trigger('click');
    }
   ...
});