centred Carousel fixed width and proportions

[cschm.tz]

Good afternoon, hope you are very well!

I am trying to have a centred Carousel (currently at a fixed height of 80vh) which mantains its proportions until a specific breakingpoint and then shrinks to the centre, like this example https://vrints-kolsteren.com/

I have had a long look at other discussions but don't seem to find a solution for this, but I am sure it should be doable would you be able to point me in the right direction at all?

Also in the custom placement of the carousel captions, they seem to appear duplicate when shrinking the browser, do you know why this could be? Screen shots attached.

This is the link to my current test page
http://s955093523.mialojamiento.es/homepage-copy-copy/?preview=true

Thanks so much for your time in advance.
All the best,

Christian

[cschm.tz]

@cschm-tz

Hey hope you are both very well @Richard @arminunruh !

Just wanted to know if you had received this at all and if you could kindly any tips/shed some light? Apologies if you have, I know you are busy people.

All the best and thank you,
Christian

[arminunruh]

sorry for the late response!

so i created a carousel, center aligned it.
these are the settings:

then in lay options -> carousel addon

i set "Vertical Alignment of Slides" to "middle"

and it works like on your example website

I think you probably checked "fill slides" and thats why it cuts off the image when your browser becomes smaller

[cschm.tz]

Thanks so much for your guidance @arminunruh i think this may work!!

Do you know what is causing the duplicated captions I mentioned? This happens when manipulating the width/size of the browser, I have reattached a screenshot just in case and the link to the site is this one.
http://s955093523.mialojamiento.es/homepage-copy/?preview=true

Thanks very much and all the best
Christian

[arminunruh]

oh yea
its because the browser cant resize everything fast enough causing the next caption to show up

update the carousel addon now

then use this css:

.single-caption{
opacity: 0;
}
.single-caption.caption-active{
opacity: 1;
}