ampproject / ampproject/amphtml

[amp-base-carousel] make the width of the scrollable area adjustable

Open
#32,159 1 comment 0 reactions 0 assignees View on GitHub
Component: amp-base-carousel P3: When Possible Stale Type: Feature Request WG: components
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.

スクリーンショット 2021-01-23 12 24 20

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.