bootstrap 4 carousel do not move to another slide if false

Question

I have bootstrap 4 each slide contains form part, and I have next button, what i I want is to not move to next slide unless variable is true (for form validation purposes ). I tried to attach onclick with preventDefault() but it did not work, also tried:

$('#c').on('slide.bs.carousel', function () {
       $('#c').carousel(0);
    })

but did not work, how to achieve what I want?

Provide a reproducible code please to do some test on what you are trying to archive. Please HTML as well. — Always Helping, Jun 16 '20 at 01:23

score 0 · Answer 1 · answered Jun 16 '20 at 01:27

There are even simpler ways you can go about this. You can hide the entire slide if your variable is false or you can remove an essential part of it, like the href that targets the slide. The first is good for usability as you don't want your users seeing a slide control that doesn't work.

Even simpler, you can add CSS to the controls that set display to none, and use jQuery to change the display property or remove it entirely when your variable is set. You might need to keep checking in a loop if the variable is set, so look into setInterval for that.

bootstrap 4 carousel do not move to another slide if false

1 Answers1