'How to make a responsive amp-carousel

Is there any way to make a responsive amp-carousel?
I've tried to use the attribute layout="responsive" on images within the carousel, but it doesn't work.

amp-html


Solution 1:[1]

As documented here: https://github.com/ampproject/amphtml/blob/master/extensions/amp-carousel/amp-carousel.md amp-carousel does not currently support layout="responsive"

That means that you can't currently create a responsive amp-carousel.

Please file a new issue: https://github.com/ampproject/amphtml/issues/new to track this feature request.

Solution 2:[2]

I filed a new issue on GitHub and layout="responsive" is supported if:

  1. the amp-carousel is type="slides".
  2. the user adds a CSS rule targeting amp-img img to set object-fit: contain.

Solution 3:[3]

Per @Bruno's answer this will work if you use layout="responsive" and type="slides" and you enable the amp dev channel - https://cdn.ampproject.org/experiments.html

Obviously this is not yet in production.

Solution 4:[4]

Mate, use amp-base-carousel instead:

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ade
Solution 2 Dan Dascalescu
Solution 3 John Pettitt
Solution 4 ysanmiguel

Related Questions