AMP-carousel required height

Question

I have an amp-carousel containing slides of div's each with a varying amount of text (not images).

Due to the varying amount of text in each slide and the fixed height I am unable to get a ratio that will be responsive. So I either show all text with huge spaces below or have text being cut off.

I'm trying to achieve where the carousel's height will adjust depending what inside it.

I tried other layouts with the same result.

Anyone have a way around this?

<amp-carousel height="180" width="790" layout="responsive" type="slides">
      <div class="review">   
           1 paragraphs of text
      </div>
      <div class="review">   
           5 paragraphs of text
      </div>
      <div class="review">   
           4 paragraphs of text
      </div>
</amp-carousel>

score 1 · Accepted Answer · answered Apr 30 '19 at 13:54

The reason why a carousel's height has to be specified is to prevent content jumping under the carousel depending on the selected page, so there's no way to avoid that.

One workaround is to have a fixed height and use amp-fit-text:

<amp-carousel height="500" layout="fixed-height" type="slides">
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      1 paragraphs of text
    </amp-fit-text>
  </div>
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      5 paragraphs of text
    </amp-fit-text>
  </div>
  <div class="review">
    <amp-fit-text height="500" layout="responsive">
      4 paragraphs of text
    </amp-fit-text>
  </div>
</amp-carousel>

This allows you vertically center the text, modify text size and/or cut it off depending on the amount of text inside.

AMP-carousel required height

1 Answers1