I was thinking to build a “carousel effect” for photos on my personal website one day and I suddenly thought of Bootstrap carousel. I used the code on this site for the first time but I found the “slide” effect is a bit wired for me and I don’t find a way to fix it.
Then I used an npm package named “react-material-ui-carousel”. The “slide” and “fade” animation works well. However, some odd effects appeared either.
Here is my initial code:
At the first time of rendering the page, there is a loading time for rendering each image. Therefore, during that loading time, since there is no image shown up, the two navigation buttons along with the indicators at the bottom suddenly rise up to the top of their parent div until the image is fully rendered. It is quite annoying and ugly. Not good enough for the design. After trying many times, I finally find a way to fix it.
Very simple, just add a div with fixed width and height that wraps the image tag:
The fixed-size container allows the navigation buttons and indicators to always stay at the same position no matter the image is fully rendered or not.
The solution above works well in my case, hope it can help you.
