AMP Carousel dynamic height

Question

I have an amp-carousel element in my page but I don't know its height before render. If I use layout="responsive" height is obviously wrong because I don't have width/height ratio right - I use 100px for both.

Whats other options? I tried layout="flex-item" but that destroy the carousel completely.

There is also `layout="fixed-height"`, see https://stackoverflow.com/a/52208326/812102 — Skippy le Grand Gourou, Sep 06 '18 at 16:18

score 2 · Answer 1 · answered Dec 07 '16 at 10:52

As mentioned by Dima Voytenko in this GitHub post,

layout=responsive essentially means "responsive width". It takes all of the available width and calculates height automatically based on the aspect ratio.

However, please note that layout=responsive is only supported on slides type of carousel. (Reference: amp-carousel)

With that, you may opt to consider using this example:

<amp-carousel width="100" height="100" controls layout="responsive" type="slides">

You may want to check this link for more examples.

Lastly, you may want to also visit the following for more information:

But I do not know the ratio, slides have dynamic height. I do not know maximum or minimum height too. Please read my question again. — Matěj Marčišovský, Dec 13 '16 at 12:12

score 0 · Answer 2 · answered Jun 13 '17 at 14:32

It's not mandatory to know the images width and height for images with responsive layout. What you should match is the aspect ratio of the images (which I don't know if you have this data beforehand). See "Settings the aspect ratio" here https://www.ampproject.org/es/docs/reference/components/amp-img

If you don't have the aspect ratio then you should use server side code to determine this ratio, or the dimentions of the images.

Dinamically or automatically AMP won't set the images width or height for you because this kind of HTML avoids repainting and other expensive stuff to load pages quickly.

Hope that helps.

AMP Carousel dynamic height

2 Answers2