ampproject / ampproject/amphtml

amp-carousel 0.2 with `loop`, `type=carousel` and `layout=fixed-height` is cut off when contained in a large width

Open
#37,021 1 comment 0 reactions 0 assignees View on GitHub
P2: Soon Stale Type: Bug WG: components
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.

Screen Shot 2021-11-20 at 3 53 18 PM

/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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.