2

モーダル ウィンドウ内でブーストラップ カルーセルを使用します。

そのコードは次のようになります。

<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;
});
4

3 に答える 3

3

私は、回避策を見つけたと思います。必要なリンクを探してクリックするだけです。

$(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');
    }
   ...
});
于 2012-10-28T14:19:53.887 に答える
1 
 $(document).bind('keyup', function(e) {
    if(e.keyCode==39){
     //keycode for right arrow 
    }   
    else if(e.keyCode==37){
    // keycode for left arrow 
    }
});
于 2013-03-11T01:09:02.663 に答える