我希望我的引导程序传送带在键盘左右箭头按下时滑动

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 [email protected] 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 [email protected] Model.YogaProfileImages.ElementAt(i).YogaProfileImageId; <div [email protected] 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; 
    } 
});