-1

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 : https://stackoverflow.com/a/24607364/6132061

How to fix that? Thank you <3

Community
  • 1
  • 1
Pierrou
  • 303
  • 3
  • 21

1 Answers1

1

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.

iomv
  • 2,409
  • 18
  • 28
  • Perfect, thank you :) **Demo:** [Bootply](http://www.bootply.com/dAMidf8a2s) if someone look at this. – Pierrou May 24 '16 at 15:00