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">‹&lt;/a>
      <a href="#myCarousel" data-slide="next" class="carousel-control right">›&lt;/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');
    }
   ...
});

Answer 2

 $(document).bind('keyup', function(e) {
    if(e.keyCode==39){
     //keycode for right arrow 
    }   
    else if(e.keyCode==37){
    // keycode for left arrow 
    }
});

Answer 3

我已将此代码用于下一页和上一页，并将其与名为 next 和 previous 的 id 结合使用

$(document).keyup(function(e) {

            如果（e.keyCode == 39）{  
                window.location.href = $("#next").attr('href');
            }
            如果（e.keyCode==37）{
                window.location.href = $("#previous").attr('href');
            }});

因此，如果您的 html 页面中有一个元素，或者具有此 id 的 php 页面，则该函数专门使用该 id。

例子：

<div class="buttons">
<a href="www.urlpage.tld/previous/" class="prev" id="previous" title="Previous Page"></a> <a href="www.urlpage.tld/next/" class="next" id="next" title="Next Page"></a>
</div>

我希望这对你有帮助。

问候！