Hi, I’ve done something funny to my carousel and am hoping that someone can help? It has four slides containing images and captions and animates fine.
However, during the transition, the entire section containing the carousel expands in Y and the next slide is displayed underneath before popping up into the main slide and the section resizes back to before.
Any ideas, please?
Disable any custom CSS. Delete one slide at a time to see if there is one slide that’s the trouble-maker. Open a new document and copy/paste just the carousel into an empty container.
If that doesn’t solve it, just start fresh. It takes all of 2 minutes to add a new carousel with just four slides. Make sure you delete the old carousel first so you don’t run into duplicate ID issues.
Just use the process of elimination to figure out what you did to make things go crazy. It’s almost certainly a CSS issue.
Also realize the the Bootstrap carousel height is determined by the pixel height of the images that are added to it. If you want the carousel to remain consistent in height, all the images must be the same size (which preferably should be done to the images themselves in an image editing program like Photoshop.)
Thanks. I added a max-height to the carousel-inner and it seems to have sorted it. I think it was because my images were different heights like you said. Thank you.