ampproject / ampproject/amphtml
[amp-base-carousel] make the width of the scrollable area adjustable
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## Describe the new feature or change to an existing feature you'd like to see
the scrollable area of the amp-carousel is adjustable with setting padding to the parent element.
but it's not the case with the amp-base-carousel.

see [playground](https://playground.amp.dev/?mode=Responsive#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoT4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogIDx0aXRsZT5BdXRvIGFkdmFuY2Ugd2l0aCBncm91cGluZzwvdGl0bGU+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9ImFtcHMuaHRtbCIgPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsbWluaW11bS1zY2FsZT0xLGluaXRpYWwtc2NhbGU9MSI+CiAgPGxpbmsgaHJlZj0naHR0cHM6Ly9mb250cy5nb29nbGVhcGlzLmNvbS9jc3M/ZmFtaWx5PVF1ZXN0cmlhbCcgcmVsPSdzdHlsZXNoZWV0JyB0eXBlPSd0ZXh0L2Nzcyc+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWNhcm91c2VsIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1jYXJvdXNlbC0wLjIuanMiPjwvc2NyaXB0PgogIDxzY3JpcHQgYXN5bmMgY3VzdG9tLWVsZW1lbnQ9ImFtcC1iYXNlLWNhcm91c2VsIiBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwL2FtcC1iYXNlLWNhcm91c2VsLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHN0eWxlIGFtcC1jdXN0b20+CiAgICBhbXAtY2Fyb3VzZWwsCiAgICBhbXAtYmFzZS1jYXJvdXNlbAogICAgewogICAgICBwYWRkaW5nOiAwIDIwcHg7CiAgICAgIGJvcmRlcjogMXB4IHNvbGlkICM1NTU7CiAgICAgIGJhY2tncm91bmQ6ICNjY2RkZGQ7CiAgICB9CiAgICBhbXAtY2Fyb3VzZWwgaW1nLAogICAgYW1wLWJhc2UtY2Fyb3VzZWwgaW1nIHsKICAgICAgb2JqZWN0LWZpdDogY292ZXI7CiAgICB9CiAgICAuc2xpZGUgewogICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogICAgICBwYWRkaW5nOiA0cHg7CiAgICAgIGJhY2tncm91bmQ6ICNmZmY7CiAgICB9CiAgPC9zdHlsZT4KICA8c3R5bGUgYW1wLWJvaWxlcnBsYXRlPmJvZHl7LXdlYmtpdC1hbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aDstbW96LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tcy1hbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aDthbmltYXRpb246LWFtcC1zdGFydCA4cyBzdGVwcygxLGVuZCkgMHMgMSBub3JtYWwgYm90aH1ALXdlYmtpdC1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tb3ota2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUAtbXMta2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fUAtby1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QGtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX08L3N0eWxlPjxub3NjcmlwdD48c3R5bGUgYW1wLWJvaWxlcnBsYXRlPmJvZHl7LXdlYmtpdC1hbmltYXRpb246bm9uZTstbW96LWFuaW1hdGlvbjpub25lOy1tcy1hbmltYXRpb246bm9uZTthbmltYXRpb246bm9uZX08L3N0eWxlPjwvbm9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBzcmM9Imh0dHBzOi8vY2RuLmFtcHByb2plY3Qub3JnL3YwLmpzIj48L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT4KICA8aDI+YW1wLWJhc2UtY2Fyb3VzZWw8L2gyPgogIDxhbXAtYmFzZS1jYXJvdXNlbAoJaWQ9ImNhcm91c2VsLTEiCgloZWlnaHQ9IjIwMCIKCWxheW91dD0iZml4ZWQtaGVpZ2h0IgoJbG9vcD0iZmFsc2UiCgltaXhlZC1sZW5ndGg9InRydWUiCiAgPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogPC9hbXAtYmFzZS1jYXJvdXNlbD4KICA8aDI+YW1wLWNhcm91c2VsPC9oMj4KICA8YW1wLWNhcm91c2VsCglpZD0iY2Fyb3VzZWwtMiIKCWhlaWdodD0iMjAwIgoJbGF5b3V0PSJmaXhlZC1oZWlnaHQiCiAgPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgY2xhc3M9InNsaWRlIiB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgc3JjPSJodHRwczovL3BsYWNla2l0dGVuLmNvbS80MDAvMzAwIiBsYXlvdXQ9ImZsZXgtaXRlbSI+PC9hbXAtaW1nPgogPC9hbXAtY2Fyb3VzZWw+CjwvYm9keT4KPC9odG1sPg==)
that's because the scrollable area of the amp-base-carousel ( `.i-amphtml-carousel-content` ) has [this style](https://github.com/ampproject/amphtml/blob/5ef5b279825836ccfae6f3157faaad3531f494dc/extensions/amp-base-carousel/0.1/carousel.css#L25-L31).
I want to set horizontal padding with amp-base-carousel like amp-carousel.
but I can't overwrite the css of `.i-amphtml-` prefix class because it causes validation error.
## Describe alternatives you've considered
if the element `.i-amphtml-carousel-content` has another class, I can overwrite the style.
I don't think this would be harmful for the functions of the carousel, because amp-carousel also overwrites this style.
[please see here.](https://github.com/ampproject/amphtml/blob/5ef5b279825836ccfae6f3157faaad3531f494dc/extensions/amp-carousel/0.2/amp-carousel.css#L28-L30)
Contributor guide
Research direction
Start with extensions/amp-base-carousel/0.1/carousel.css, especially the linked rules for .i-amphtml-carousel-content, and compare them with the corresponding amp-carousel/0.2/amp-carousel.css rules. Reproduce the behavior in the linked AMP Playground example and verify that horizontal padding can be set without triggering AMP validation errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100