Bootstrap Carousel slides to change after menu closes

Question

I have created a nav menu that controls the slides of the carousel (bootstrap).

I managed to make it work perfectly. When i press a menu button the slides change and the menu slides back in.

However the problem is that it's doing the actions in the same time and it looks strange.

I would like that the carousel slides change just after the menu was sliding back in.

How can i make it? Maybe with a jquery script?

Thanks.

Answer 1

What you are looking for requires that the carousel does not slide until your collapse element has finished hiding. I do not recommend using timer or a delay - instead, make use of bootstrap events to coordinate the hiding and animation of your bootstrap elements.

In your carousel's 'slide.bs.carousel' event handler (check events section here) call the eventObject's preventDefault so that no slide takes place.

In your collapse element's 'hidden.bs.collapse' event handler (check events section here) call $('#carousel').carousel(number) where number is the slide index corresponding to your menu.

The code might look something like this -

var shouldSlide = false;
$('#carousel').on('slide.bs.carousel', function (e) {
    if (shouldSlide === false) {
        e.preventDefault();
    } 
});

$('#collapse').on('hidden.bs.collapse', function (e) {
    shouldSlide = true;
    $('#carousel-example-generic').carousel(3)
});

Ofcourse, the code above is not a complete working example - you'll need to coordinate between the two event handlers to make sure everything works as expected. Hope this helps.