Support dynamic height for amp-carousel with slides

[milkovsky]

Given: there is an amp-carousel with slides. Each slide can contain both text and images.
Current issue: The height of the carousel is not dynamic, some slides have too many white space, some slide content is cut off.

Actual result:

Expected:

Source code:

<amp-carousel type="slides" layout="responsive"
                  controls loop
                  height="500" width="500" >
  <div class="slide">....</div>
  <div class="slide">....</div>
  <div class="slide">....</div>
</amp-carousel>

[milkovsky]

Here is what I tried in CSS, but these modifications make my AMP page invalid:

i-amphtml-sizer {
  display: none !important;
}

.i-amphtml-slides-container,
.i-amphtml-slide-item,
.i-amphtml-slide-item>* {
  height: auto !important;
}

.i-amphtml-slides-container {
  position: static !important;
  overflow: hidden !important;
}

.i-amphtml-slide-item.i-amphtml-slide-item-show {
  position: absolute !important;
  display: none !important;
}

.i-amphtml-slide-item.i-amphtml-slide-item-show[style="order: 3;"] {
  position: relative !important;
  display: block !important;
}

[dreamofabear]

/to @aghassemi @ericlindley-g

[aghassemi]

@milkovsky Thanks for the report.
I am not sure if shifting content below carousel is the best UX to solve this problem. Alternatives such as supporting expandable "description" same way we do for amp-lightbox-gallery should be considered. /cc @spacedino

/to @ericlindley-g @nainar to see if this fits prioritization in #16508

[ericlindley-g]

Agreed that the UX may not be optimal enough to undertake the effort and take on the maintenance cost of implementing this pattern. Keeping the feature request in order to track/discuss the use case and potentially the pattern itself, and will discuss to see if it fits into some of the current carousel optimization work.

[milkovsky]

Thank your for the reply.
I presented only a basic an example with text and image, but every slide can contain text with multiple images, there also might be an Instagram or Facebook embed, YouTube video etc.

not sure if shifting content below carousel is the best UX

Shifting of content is not a bad idea imo, in addition this shifting is already present in some other AMP components, for example amp-accordion.
What do you consider as a better element for this kind of content?

expandable "description" same way we do for amp-lightbox-gallery

@aghassemi I have checked the amp-lightbox-gallery docu and amp-lightbox-gallery examples, I have found only the aria-describedby, but it does not solve the content presentation problem.
Do you mean something like an amp-accordion here?

[nainar]

@milkovsky's pain points exist without captioned images too.

For e.g. consider a carousel with the following:

• A portrait image,
• A Youtube embed
• A twitter embed

Depending on the layout supported there will either be blank space around the twitter embed (due to the long height set on the carousel to support the portrait image) or some other aesthetic displeasure (the image being cut off).

Centering the elements that are smaller is possible? Adds some aesthetic sugar.
Would agree with @aghassemi and @ericlindley-g that having the arrows jump as content dimensions change is probably not the best solution here.

This site has an example of a responsive height carousel for example: http://kenwheeler.github.io/slick/ (See adaptive height section)

[spacedino]

The few components we have that shift content on the page should be the exception, not the rule. From a UX perspective consistency for the user is what we should optimize for (arrows staying in the same place for example). For some of the things in the list we don't know the size of the object and therefore it's virtually impossible to not have the content shift, although we are working on this cc/ @sparhami . AFAI have seen, amp-lightbox-gallery is the closest we have to solving this problem in a way that gives users control over what content they want to read without affecting the layout of the page.

@milkovsky can you explain more when you say "[amp-lightbox-gallery] doesn't solve the content presentation problem".