我想让我的引导旋转木马滑动时，键盘的左右箭头被按下
我想让我的引导旋转木马滑动时，键盘的左右箭头被按下
提问于 2016-12-01 14:56:28
我有一个旋转木马与图像内的模式窗口。当我按键盘上的左/右箭头键时，我想让图像来回滑动。根据bootstrap carousel文档，data-keyboard属性默认值为true，但是当我按下箭头键时没有任何反应！因此，我尝试将属性放入代码中，但当我按下向左/向右箭头键时，仍然没有任何反应。
问题-是否应该使用向左/向右键盘按键自动来回滑动图片？如果是，那么我就搞砸了，如果不是，我是否需要捕获一些JS carousel事件，然后使用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">×</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>
回答 3
Stack Overflow用户
发布于 2016-12-01 15:10:22
请让您的代码示例工作，以获得更好的答案。但到目前为止，这似乎可以帮助你：
$(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;
}
});Stack Overflow用户
发布于 2016-12-01 15:08:41
我会使用一些jquery事件侦听器，比如.on('keyup'，some function ())参见文档here，在这个函数中，如果右箭头被按下，我会递增一个索引，它将“引导”到我想要的旋转木马显示的图像。同样的事情也适用于左箭头被按下，但在这种情况下，我会减少索引。如果我没有正确理解您的问题，请告诉我。
Stack Overflow用户
发布于 2020-01-26 19:32:06
对我来说，这是有效的=>
<script>
$(".carousel").carousel({
interval: 6000,
keyboard: true
});
</script>但只有当我在图像上添加左右控制箭头并按下其中一个箭头至少一次时，它才起作用。之后，我可以使用键盘上的左箭头和右箭头来滑动图像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40904348
复制相关文章
相似问题
腾讯云开发者
