Amphtml: <amp-carousel type="carousel">: Support hiding scrollbars

[aghassemi]

There are use-cases where showing the scrollbars for the <amp-carousel> is not desirable as user scrolls. We should add a simple noscrollbars attribute. We can use the same technique used in slides to hide the scrollbars

[grahamle]

so how is everything going? can <amp-carousel> support us to hide the scrollbar?

[ericlindley-g]

Not yet, though it's still something on my list to do—@aghassemi or @camelburrito , is this an approachable feature for non-core contributors, or something that a developer would have to be pretty comfortable with building components to do?

[aghassemi]

@grahamle would you be interested in sending a PR? The version of amp-carousel with type=slides already does this with CSS.

[hackshen]

add the code below into your own css file will do the trick
amp-carousel .i-amphtml-scrollable-carousel-container::-webkit-scrollbar {display:none}

[grahamle]

@ericlindley-g Just let you know we've fixed the horizontal scroll bar issue, by our engineer @hackshen

[camelburrito]

@hackshen - -webkit-scrollbar only works on webkit browsers + i have faced issues with setting scrollbar height to 0 on type="slides" . An ideal fix would be what @aghassemi described above. We would be super happy if you would be willing to send in a pull request and contribute to AMP.

Here is a link to help you get started
https://github.com/ampproject/amphtml/blob/master/CONTRIBUTING.md#tips-for-new-open-source-contributors

Let me know if you are interested and if you need help !

[amanintech]

add the code below into your own css file will do the trick
amp-carousel .i-amphtml-scrollable-carousel-container::-webkit-scrollbar {display:none}

In tried this but it turned amp to be invalid

[amanintech]

I still cant removed the scroll bar any better way of doing it

[mehigh]

Here's a patch which works @Amanrazdan

amp-carousel > div:first-child {
   scrollbar-width: none; /* For Firefox */
}

amp-carousel > div:first-child::-webkit-scrollbar {
  display:none; /* For Chromium */
}

@hackshen
The .i-amphtml-... classes should never be styled directly. But there's always the work-around to use a different selector.

[marinastavares]

any news on that? 😅