我希望我的Bootstrap走马灯可以在按下键盘左右箭头时滑动。

Question

我在一个模态窗口中放置了一组图片的轮播图。我想要当我按下键盘上的左/右箭头键时，图片可以来回滑动。根据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>

- user1186050

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

- Martin P.

---

所以，Bootstrap轮播的默认行为是在按下箭头时不会将图像向左和向右滑动！？？？你可能认为它会默认这样做。 - user1186050

同时这个程序使用了flippers！我已经从代码中移除了我的flippers。 - user1186050

这不是关于你何时触发正确的按键，而是如何到达那里 ;) 请仔细查看文档：https://v4-alpha.getbootstrap.com/components/carousel/#carouselprev您可以通过删除“.click()”代码并将其替换为类似于“.carousel('prev')”之类的内容来轻松匹配您情况的代码，如链接的文档中所示，在“方法”下面 :) - Martin P.

我应用了smoothproducts()滑块，它运行良好。我的问题是，如果没有图像可以滑动，它仍然会突出显示右侧按钮并淡化左侧按钮，而实际上应该是模糊右侧按钮并突出显示左侧按钮。 - Risheekant Vishwakarma

对于键盘事件，建议使用keyup而不是keydown，因为如果按住键一段时间，只有在释放时才会触发事件。Martin P. 提供了线索，移动走马灯的最佳方法是使用$('.carousel').carousel('prev');和$('.carousel').carousel('next');。 - Sergio Abreu

Answer 2

对我来说，这个方法有效 =>

<script>
    $(".carousel").carousel({
        interval: 6000,
        keyboard: true
    });
</script>

但是只有在我添加了图像上的左右控制箭头并至少按下其中一个箭头时，它才能正常工作。之后，我才可以使用键盘上的左右箭头来滑动图片。

- Aleideka

Answer 3

我会使用一些jQuery事件监听器，例如.on('keyup', somefunction())，请参阅此处的文档。在这个函数中，如果按下右箭头，我会增加一个索引，这将“引导”到我想要展示的轮播图像。左箭头被按下时也适用于同样的事情，但在这种情况下，我会减少索引。如果我没有正确理解您的问题，请让我知道。

- catchiecop