Я хочу, чтобы моя загрузочная карусель скользила при нажатии клавиш влево и вправо стрелки

Question

У меня есть карусель с изображениями внутри модального окна. Я хочу, чтобы изображения скользят назад и вперед, когда я нажимаю клавиши со стрелками влево/вправо на клавиатуре. В соответствии с документацией бутстрап-карусели значение атрибута атрибута клавиатуры данных истинно, но ничего не происходит, когда я нажимаю клавиши со стрелками! Поэтому я попытался поместить атрибут в код, но ничего не происходит, когда я нажимаю клавиши со стрелками влево/вправо.

Вопрос. Должны ли фотографии автоматически перемещаться вперед и назад при нажатии левой или правой клавиши? Если да, то у меня что-то испортилось, если нет, мне нужно какое-то событие карусели 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

Я хотел бы использовать некоторые JQuery событие listenner, такие как .он («KeyUp», SomeFunction()) в документации here и в этой функции, если была нажата стрелка вправо, я бы увеличиваем индекс что «приведет» к изображению, которое я бы хотел показать своей карусели. То же самое относится к нажатию левой стрелки, но в этой ситуации я бы уменьшил индекс. Если бы я не понял вашу проблему, сообщите мне об этом.

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