My goal is to implement a bootstrap4 carousel with two distinct steps:
- The first carousel item focuses on authentication, prompting for a username and password.
- In the second step, authorization takes place where the user must select from a list of accessible groups.
I am seeking a solution to verify the validity of the entered credentials before advancing to the next slide using JavaScript code. While I am able to utilize .carousel('pause'), preventing the transition to the subsequent slide has proven challenging. Moreover, I prefer not to introduce an additional button specifically for checking the input contents.
$('#myCarousel').on('slide.bs.carousel', function (e) {
// authentication check here
if (!isAuth)
{
// remain on current slide
}
else
{
// proceed to the next slide
}
})
Is there any method available to achieve this functionality?
Note: I have disabled auto-sliding by setting data-interval="false". Users navigate manually between slides, either through clicks or arrow keys.