如何制作响应式放大器轮播

Question

有什么方法可以做出响应amp-carousel？
我尝试在轮播中的图像上使用属性 layout="responsive"，但它不起作用。

Answer 1

如此处所述：https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md amp-carousel 当前不支持布局="responsive"

这意味着您目前无法创建响应式 amp-carousel。

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

Answer 2

I filed a new issue on GitHub 和 layout="responsive" 支持，如果：

amp-carousel 是类型="slides"。
用户adds a CSS rule targeting amp-img img设置object-fit: contain。

Answer 3

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

显然这还没有投入生产。

Answer 4

伙计，请改用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>

如何制作响应式放大器轮播

How to make a responsive amp-carousel

amp-html