jquery - Bootstrap模态+轮播。下一张和上一张幻灯片不会通过 Javascript 进行转换

Question

我在模态窗口内使用 boostrap 轮播。

代码如下所示:

<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>

当用户单击“下一个”和“上一个”按钮时，一切正常。但我也希望允许用户通过键盘上的左右箭头进行导航。我编写了执行此操作的代码，但遇到了奇怪的问题:在这种情况下过渡动画不起作用。我可以启用它吗？

我的脚本

$(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

我想，我找到了解决方法。我只是寻找必要的链接，然后单击它。

$(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');
    }
   ...
});