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

Posted 2023-02-22

【中文标题】我希望我的引导轮播在按下键盘左右箭头时滑动

【英文标题】：I want my bootstrap carousel to slide when keyboard left and right arrows are pressed

【发布时间】：2017-04-15 17:16:23

【问题描述】：

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

【讨论】：

所以当按下箭头时，引导轮播的默认行为不会左右滑动图像！？？？你会认为它会，默认情况下

这也使用了脚蹼！我从代码中删除了我的脚蹼。

当您触发正确的按键时，这与您到底在做什么无关。它是关于如何到达那里的；) 仔细查看文档：v4-alpha.getbootstrap.com/components/carousel/#carouselprev 您可以通过删除 .click() 代码并将其替换为 .carousel('prev') 之类的代码来轻松匹配您的情况的代码，如链接文档中所示，在“方法”下:)

我应用到 smoothproducts() 滑块它工作正常，我的问题是如果没有图像可以滑动它仍然在淡入淡出左键时高高右键，而这应该是模糊右键和高光左键

对于按键事件，建议使用keyup代替，因为如果按住按键一段时间，只有在释放时才会触发事件。 Martin P. 给出了线索​​，移动轮播的最好方法是使用 $('.carousel').carousel('prev');和 $('.carousel').carousel('next');

【参考方案2】：

我会使用一些 jquery 事件侦听器，例如 .on('keyup', somefunction()) 请参阅文档here，如果按下右箭头，我会在此函数中增加一个索引，该索引将“引导”到图像我希望我的轮播显示。同样的事情适用于按下左箭头，但在这种情况下，我会减少索引。如果我没有正确理解您的问题，请告诉我。

【参考方案3】：

对我来说这很有效 =>

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

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