我希望我的引導程序傳送帶在鍵盤左右箭頭按下時滑動

Question

我有一個帶模式窗口內圖像的旋轉木馬。當我按下鍵盤上的左/右箭頭鍵時，我希望圖像來回滑動。根據bootstrap carousel文檔，數據鍵盤屬性的默認值爲true，但按下箭頭鍵時沒有任何反應！所以我試着把這個屬性放在代碼中，當我按左/右箭頭鍵時，仍然沒有任何反應。

問題 - 圖片是否應該用左/右鍵盤自動來回滑動？如果是的話，那麼我有東西搞砸了，如果不是，我需要一些JS旋轉木馬事件捕獲，然後用js/jQuery手動滑動？

這是我的代碼！

<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

我會用一些jQuery的事件listenner如。對（「KEYUP」，somefunction（））見文檔here並在此功能中，如果按下右箭頭我將增加一個索引那會「引導」我想讓我的旋轉木馬展示的圖像。同樣的事情適用於左箭頭被按下，但在這種情況下，我會減少索引。如果我沒有正確解決您的問題，請告訴我。

Answer 2

請讓你的代碼示例工作得到更好的答案。但現在高達好像這可以幫助你：

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