Different height for images fix left/right navigation for carousel example

[thewebartisan7]

In this example https://fancyapps.com/playground/vu when there is images with different height, how to keep left/right navigation always in center? Also the thumbs always remain separated from the most high image by leaving too much space between images and thumbs.

Thank You!

[fancyapps]

Hi,

You see, Carousel is not messing with height (e.g., it is not setting any CSS height value), therefore you can choose what value works best for you and set it using CSS. You can then use CSS object-fit property to make all images the same height and to get rid of the space between carousel and thumbs.

[thewebartisan7]

Thanks for your reply, I much appreciate.

I have same width but different height, see https://new.uovodiluc.ch/galleria.html

I solved issue with thumbs by putting them on top. I prefer on bottom but it's fine as quick fix for now.

The only thing now is with next/prev button, as you can see they are not always centered, because carousel__viewport height is the same as the max height of image.

I didn't yet check into deeply how to solve this via CSS, but in case you have a quick workaround, please let me know.

In case not, thanks anyway for your great work.

[fancyapps]

In your case, I think the best would be not to display navigation arrows for the main Carousel. If total height would adjust to the current slide, then arrows would jump up and down and it would be annoying. I think you could just display arrows for the thumbnails Carousel.

[thewebartisan7]

Hi, thanks for your reply. Yes that could be a solution which I think of.

However this cause another problem in my case in homepage, especially visible in mobile breakpoint, where you can see the right content after the carousel. When image is too short, then there is too much space on bottom, see attached screenshot.

The "jump up and down of arrows" it's not a big problem, you can see the same thing also with bootstrap carousel. Anyway I understand what you mean. It can be annoying, the same also when you see other content jump up and down like in issue mentioned above. Without a fixed height of max image, bottom content will jump up and down.

For now in home I have solved if getting random X images and assuring to get always portrait images with similar ratio so that the difference is very low.

I will consider to remove the arrow left/right, need to check this with customer.

[thewebartisan7]