Ich möchte, dass mein Bootstrap-Karussell gleitet, wenn die Tasten nach links und rechts gedrückt werden.

Question

Ich habe ein Karussell mit Bildern in einem modalen Fenster. Ich möchte, dass die Bilder vor und zurück gleiten, wenn ich die linke/rechte Pfeiltaste auf der Tastatur drücke. Laut der Bootstrap-Karussell-Dokumentation ist der Standardwert des Datentastaturattributs wahr, aber nichts passiert, wenn ich die Pfeiltasten drücke! Also habe ich versucht, das Attribut in den Code zu setzen und trotzdem passiert nichts, wenn ich die Pfeiltasten links/rechts drücke.

Frage - Sollten die Bilder automatisch mit einer linken/rechten Tastatur drücken? Wenn ja, dann habe ich etwas durcheinander gebracht, wenn nein, brauche ich ein JS-Karussell-Event, das erfasst wurde, und gleite dann manuell mit js/jquery?

Hier ist mein Code!

<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

würde ich einige Jquery Ereignis listenner wie .on ('keyup', Einefunktion()) nachschauen Dokumentation here und in dieser Funktion, wenn Pfeil nach rechts gedrückt wurde, ich würde einen Index erhöhen das würde zu dem Bild führen, das mein Karussell zeigen sollte. Dasselbe gilt für das Drücken des linken Pfeils, aber in dieser Situation würde ich den Index verringern. Wenn ich Ihr Problem nicht richtig verstanden habe, lassen Sie es mich wissen.

Answer 2

Bitte machen Sie Ihr Codebeispiel, um eine bessere Antwort zu erhalten. Aber bis jetzt scheint es, als könnte dies Ihnen helfen: