我在模态窗口中有一个带有图像的轮播。当我按下键盘上的左/右箭头键时,我希望图像来回滑动。根据 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">×</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>
最佳答案
请让您的代码示例正常工作以获得更好的答案。但到目前为止,这似乎可以帮助您:
$(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;
}
});
关于javascript - 我希望我的 Bootstrap 轮播在按下键盘左右箭头时滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40904348/