如何制作响应式放大器转盘

如本文所述: https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md amp carousel当前不支持layout=“responsive”

这意味着你目前无法创建一个响应式放大器转盘。

请提交新问题: https://github.com/ampproject/amphtml/issues/new 以跟踪此功能请求。

我 filed a new issue on GitHub 在以下情况下,支持layout=“responsive”:

1. 这个 amp-carousel 是type=“幻灯片”。
2. 用户 adds a CSS rule targeting amp-img img 设置 object-fit: contain .

根据@Bruno的回答,如果您使用layout=“responsive”和type=“slides”,这将起作用 和 启用amp-dev通道- https://cdn.ampproject.org/experiments.html

显然,这还没有投入生产。

Mate,使用amp base carousel代替:

<amp-base-carousel loop="true"  width="600" height="400" layout="responsive">
        <amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
        <amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
        <amp-img src="https://source.unsplash.com/QrgRXH81DXk/600x400" width="600" height="400" layout="responsive"></amp-img>
        <amp-img src="https://source.unsplash.com/8QJSi37vhms/600x400" width="600" height="400" layout="responsive"></amp-img>
    </amp-base-carousel>