javascript - 我希望当按下键盘的左右箭头时，我的 Bootstrap 轮播能够滑动

我有一个带有图片的轮播图放在模态窗口中。我希望当我按键盘上的左/右箭头时，图片能前后滑动。根据 Bootstrap 轮播图文档，data-keyboard 属性的默认值为 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>

答案＃1

请让你的代码示例能运行，以获得更好的答案。但到目前为止，这似乎可以帮到你：

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

答案＃2

我会使用一些 jQuery 事件监听器，例如 .on('keyup', somefunction())，可以查看这里的文档。在这个函数中，如果按下了右箭头，我会增加一个索引，这个索引会“指向”我希望轮播显示的图片。同样地，如果按下左箭头，我会减少这个索引。如果我没有正确理解你的问题，请告诉我。