I was trying to fix something in Bootstrap's carousel; I have big wide images in the carousel for larger displays. I needed them to be center aligned in the carousel. I ended up using this display:flex solution provided in this link.
As far as centering the images, it worked. But now I'm facing another problem. It seems that the transition runs smoothly only until the next images reaches the left border of the div. After that, it jumps directly to the centered position.It looks like there's this jump on bump, and it looks really bad.
Here's the code I'm using:
<div class="carousel-inner" role="listbox" style="display:flex; justify-content:center; height:415px; overflow:hidden;">
<img src="images/produtos_02.png" alt="text" style="flex:none;">
project link with this problem (home page, right below the main menu).
Any thoughts on how to end this bump? Tried margin-left:auto / margin-right:auto but no success.
