昨天我参加了AMP团队的精彩路演后,我开始对AMPlify网页进行展示。如果我使用layout =“ response”,则轮播可以完美地工作。但是,如果我使用layout =“ fixed-height”,则不会显示图像,只有导航按钮在那里。以下是该页面的来源:
<amp-carousel width="450" height="300" layout="fixed-height" type="slides" class="i-amphtml-element i-amphtml-carousel-has-controls i-amphtml-slidescroll">
<!-- Use `type="slides"` to display a list of images as slides. -->
<div class="i-amphtml-slides-container" aria-live="polite">
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_01.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_02.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_03.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_04.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_05.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
<div class="i-amphtml-slide-item">
<amp-img alt="ART" height="300" width="450" src="/Content/images/foo_06.png" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined amp-carousel-slide">
<i-amphtml-sizer style="display: block; padding-top: 66.6667%;"></i-amphtml-sizer>
</amp-img>
</div>
</div>
<div tabindex="0" class="amp-carousel-button amp-carousel-button-prev amp-disabled" role="button" aria-disabled="true"></div>
<div tabindex="0" class="amp-carousel-button amp-carousel-button-next" role="button" aria-disabled="false"></div>
</amp-carousel>
任何提示将不胜感激。