bootstrap4 Karussell - Absperrschieber in ‚slide.bs.carousel‘ Ereignis

Question

ich zwei Schritte mit bootstrap4 Karussell zu haben, versuche:

• ersten Karussells Artikel ist für Authentifizierung (es Benutzername und Passwort Felder)
• zweite ist für Genehmigung (listet die Gruppen, die der Benutzer Zugriff hat und fragt ihn ein) wählen

Ich möchte überprüfen, ob die Benutzer-ID und das Passwort gültig ist vor Umzug auf die nächste Folie von JavaScript-Code. Ich habe .carousel('pause'), aber ich kann nicht verhindern, auf die nächste Folie zu bewegen. Ich möchte auch keinen extra Button haben, um den Inhalt zu überprüfen.

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    // authentication check here 

    if (isAuth === false) 
    { 
     // stay on this slide 
    } 
    else 
    { 
     // move the next one 
    } 

}) 

Gibt es eine Möglichkeit, das zu tun?

Hinweis: Ich habe das automatische Gleiten deaktiviert, indem ich data-interval="false" eingestellt habe. Der Benutzer navigiert manuell zwischen Dias, d. H. Durch Klicken oder durch Pfeiltasten.

Answer 1

der Folie zu stoppen, sobald das slide.bs.carousel Ereignis ausgelöst wurde, rufen preventDefault() auf der Ereignisvariable. Dies gilt für automatisch und manuell ausgelöste Folienereignisse.

$('#myCarousel').on('slide.bs.carousel', function (e) { 
    // checks here   
    if (stop) { 
     e.preventDefault(); 
    } 
}) 

Siehe here für die entsprechenden Bits von der Quelle Bootstrap.

Wenn Sie die automatische Umschaltung aktiviert haben, können Sie auch das Karussell anhalten, da es später nicht automatisch in der Schiebefunktion fortgesetzt wird (siehe here).

Siehe here für ein Beispiel (JSFiddle).

Answer 2

Verwenden Sie diese Art und Weise:

$('#myCarousel').on('slide.bs.carousel', function (e) { 
// authentication check here 

if (isAuth === false) 
{ 
    $('#myCarousel').carousel('pause'); 
    return false; // stay on this slide 
} 
else 
{ 
    $('#myCarousel').carousel('cycle'); 
    return true; // move the next one 
} 

})