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

Question

我在模态窗口中有一个带有图像的轮播。 当我按下键盘上的左/右箭头键时，我希望图像来回滑动。 根据 bootstrap carousel 文档，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>

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

Answer 2

我会使用一些 jquery 事件监听器，比如 .on('keyup', somefunction())在这里查看文档，在这个函数中，如果按下右箭头，我会增加一个索引，该索引会“导致”图像我想要我的轮播显示。 同样的事情适用于被按下的左箭头，但在这种情况下我会减少索引。 如果我没有正确解决您的问题，请告诉我。

Answer 3

对我来说这有效 =>

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

但它仅在我在图像上添加左右控制箭头并至少按下其中一个箭头一次时才起作用。 之后我可以使用键盘上的左右箭头来滑动图像。