키보드 왼쪽 및 오른쪽 화살표를 눌렀을 때 부트 스트랩 캐 러셀이 슬라이드되기를 원합니다.

Question

모달 창 안에 이미지가있는 캐 러셀이 있습니다. 키보드의 왼쪽/오른쪽 화살표 키를 누르면 이미지가 앞뒤로 움직이기를 원합니다. 부트 스트랩 캐 러셀 문서에 따르면 데이터 키보드 속성 기본값은 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

나는 CSTE 연구진 ('의 keyup'된 SomeFuncion()) 문서 here을보고 오른쪽 화살표를 누른 경우이 기능에 내가 인덱스를 증가 것 같은 listenner 일부 JQuery와 이벤트를 사용합니다 내 회전식에 표시 할 이미지로 "이어질"것입니다. 왼쪽 화살표를 누른 것과 같은 일이 적용되지만이 경우 인덱스를 줄입니다. 내가 너의 문제를 정확하게 알지 못한다면.

Answer 2

더 좋은 답변을 얻으려면 코드 예제를 작성하십시오. 하지만 지금은 최대 개까지 당신을 도움이 될 것 같아 : 화살표를 누를 때

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