ampproject / ampproject/amphtml
amp-carousel 0.2 with `loop`, `type=carousel` and `layout=fixed-height` is cut off when contained in a large width
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
### Description
When amp-carousel 0.2 is used with the `loop`, `type=carousel` and `layout=fixed-height` attributes in a wide page, the slides are cut off, with blank space displayed on the right side of the carousel. Clicking on the left and right arrow keys does nothing.

/CC @caroqliu
### Reproduction Steps
This can be reproduced with the following AMP HTML:
```
amp-carousel
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
```
[Playground link](
https://playground.amp.dev/?format=websites&_gl=1*glz6dj*_ga*YW1wLVd5NUFON2hWN2tJZW8xam5zUzEtTUE.&mode=Responsive#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoSBsYW5nPSJlbiI+CjxoZWFkPgo8bWV0YSBjaGFyc2V0PSJ1dGYtOCI+CiAgPHRpdGxlPmFtcC1jYXJvdXNlbDwvdGl0bGU+CiAgPHNjcmlwdCBhc3luYyBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwLmpzIj48L3NjcmlwdD4KICA8IS0tICMjIFNldHVwIC0tPgogIDwhLS0gSW1wb3J0IHRoZSBjYXJvdXNlbCBjb21wb25lbnQgaW4gdGhlIGhlYWRlci4gLS0+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWNhcm91c2VsIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1jYXJvdXNlbC0wLjIuanMiPjwvc2NyaXB0PgogIDxsaW5rIHJlbD0iY2Fub25pY2FsIiBocmVmPSJodHRwczovL2FtcC5kZXYvZG9jdW1lbnRhdGlvbi9leGFtcGxlcy9jb21wb25lbnRzL2FtcC1jYXJvdXNlbC9pbmRleC5odG1sIj4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoIj4KICA8c3R5bGUgYW1wLWJvaWxlcnBsYXRlPmJvZHl7LXdlYmtpdC1hbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aDstbW96LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tcy1hbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aDthbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aH1ALXdlYmtpdC1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tb3ota2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUAtbXMta2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUAtby1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QGtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX08L3N0eWxlPjxub3NjcmlwdD48c3R5bGUgYW1wLWJvaWxlcnBsYXRlPmJvZHl7LXdlYmtpdC1hbmltYXRpb246bm9uZTstbW96LWFuaW1hdGlvbjpub25lOy1tcy1hbmltYXRpb246bm9uZTthbmltYXRpb246bm9uZX08L3N0eWxlPjwvbm9zY3JpcHQ+CjwvaGVhZD4KPGJvZHk+CiAgPGFtcC1jYXJvdXNlbCBsb29wIGhlaWdodD0iMzAwIiBsYXlvdXQ9ImZpeGVkLWhlaWdodCIgdHlwZT0iY2Fyb3VzZWwiIHJvbGU9InJlZ2lvbiIgYXJpYS1sYWJlbD0iQmFzaWMgdXNhZ2UgY2Fyb3VzZWwiPgogICAgPGFtcC1pbWcgc3JjPSIvc3RhdGljL3NhbXBsZXMvaW1nL2ltYWdlMS5qcGciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIiBhbHQ9ImEgc2FtcGxlIGltYWdlIj48L2FtcC1pbWc+CiAgICA8YW1wLWltZyBzcmM9Ii9zdGF0aWMvc2FtcGxlcy9pbWcvaW1hZ2UyLmpwZyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGFsdD0iYW5vdGhlciBzYW1wbGUgaW1hZ2UiPjwvYW1wLWltZz4KICAgIDxhbXAtaW1nIHNyYz0iL3N0YXRpYy9zYW1wbGVzL2ltZy9pbWFnZTMuanBnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgYWx0PSJhbmQgYW5vdGhlciBzYW1wbGUgaW1hZ2UiPjwvYW1wLWltZz4KICA8L2FtcC1jYXJvdXNlbD4gCjwvYm9keT48L2h0bWw+)
### Relevant Logs
_No response_
### Browser(s) Affected
_No response_
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start with the provided AMP HTML reproduction and Playground link, focusing on amp-carousel 0.2 with loop, type="carousel", and layout="fixed-height" at a wide page width. The work is done when all slides are displayed without blank space and the left and right arrow controls navigate between them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 40/100