AMP on AEM with JS API

[iwanttobeDev]

Hello i want to ask about best practice to combine AEM with js API with AMP,

for example:

<amp-carousel width="2000" height="500" layout="responsive" type="slides" autoplay delay="2000" role="region" aria-label="Carousel with autoplay" data-sly-use.data="banner.js">
<amp-img src="${data.image}" width="2000" height="300" alt="a sample image" layout="responsive"></amp-img>

....
</amp-carousel>

or put it on

<div data-sly-use.data="banner.js">
AMP code ...
</div>

but i got error, can someone guide me for best practice on this? its doesnt matter if u guys can solve this with Java API, i appreciate any help in this matter.

thanks in advanced. 
Regards

[Nikhil-Kumar]

@iwanttobeDev 

Checkout this thread, you might get some inputs : https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/amp-implementation-in-aem-....

Thanks,
Nikhil 

[narendragandhi · Accepted solution]

Hi @iwanttobeDev ,

AMP support has been added to AEM Core components in 2.11.0 - https://github.com/adobe/aem-core-wcm-components/releases/tag/core.wcm.components.reactor-2.11.0

You can refer this article for a comprehensive guide on the implementation and also covers the use case about carousel component - https://www.bounteous.com/insights/2019/11/15/open-source-google-amp-aem-core-components/

Thanks!