AMP-carousel自适应高度问题求助：文本幻灯片高度适配

AMP 因为性能优化的限制，默认要求组件高度提前确定，所以原生的 amp-carousel 没法直接实现高度随内容自动调整，但我们可以通过 amp-bind 组件结合动态属性绑定来绕开这个限制，下面是具体的实现方案：

步骤1：引入amp-bind组件 #

首先需要在页面头部添加 amp-bind 的脚本引用，因为它不是AMP的核心组件：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

步骤2：修改Carousel代码 #

我们给每个幻灯片分配唯一ID，然后通过 amp-bind 动态绑定Carousel的高度为当前激活幻灯片的内容高度：

<amp-carousel 
  id="textCarousel"
  width="790"
  height="180" <!-- 初始默认高度，可根据第一个幻灯片内容设置 -->
  layout="responsive"
  type="slides"
  [height]="document.getElementById('slide-' + textCarousel.currentSlide).clientHeight"
>
  <div id="slide-0" class="review">1 paragraphs of text</div>
  <div id="slide-1" class="review">5 paragraphs of text</div>
  <div id="slide-2" class="review">4 paragraphs of text</div>
</amp-carousel>

步骤3：添加基础样式（可选但推荐） #

给幻灯片内容添加盒模型样式，避免内边距导致的内容溢出或计算高度不准确：

.review {
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
}

原理说明 #

• textCarousel.currentSlide 是 amp-carousel 内置的属性，会实时返回当前激活幻灯片的索引（从0开始）。
• 通过 document.getElementById('slide-' + textCarousel.currentSlide).clientHeight 可以获取当前幻灯片内容的实际高度。
• [height] 是AMP的动态属性绑定语法，当 currentSlide 变化时，Carousel的高度会自动更新为对应幻灯片的内容高度。

注意事项 #

1. 页面加载时，初始高度会使用你设置的默认值（比如180），之后切换幻灯片时会自动更新为对应内容的高度。
2. 如果窗口大小变化导致内容高度改变，你可以添加一个resize事件监听来重新计算高度，比如给body添加：

   <body on="resize: AMP.setState({})">
   

   这会触发amp-bind重新计算所有绑定的属性，更新Carousel高度。
3. 这种方法会导致页面布局在切换幻灯片时发生跳动，这是高度自适应不可避免的副作用，但能保证所有文本完整显示。

内容的提问来源于stack exchange，提问作者Beth