Pierrou Pierrou - 6 months ago 18
Javascript Question

Bootstrap Carousel: Caption above the content

I'm trying to put the caption of Bootstrap Carousel above the content.
It works actually but not properly. If you click on the chevrons you'll see

< Item 1 >
bouncing... (<= This is the bug and if you're logic you understand the expected behavior with my sentence "How to fix that?")

Demo: Bootply

This is the minimal code : 1 carousel with 3 slides / 2 lines of CSS to make it work / JS to make it work

I think it's due the relative positioning but I don't want to put an absolute position.

This solution helped me : http://stackoverflow.com/a/24607364/6132061

How to fix that? Thank you <3

Answer

You need to set the fadeOut() and fadeIn() effects duration to zero:

$('.liens-bonus-caption:not(#liens-bonus-'+step+')').fadeOut(0, function() {
            $('#liens-bonus-'+step).fadeIn(0);
});

Otherwise the animation in between will be displayed resulting in a "bouncy" element.