Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

AEM 6550 - React SPA Carousel with Nested Composite Containers as Slides | AEM Community Blog Seeding

kautuk_sahni
Community Manager
Community Manager

BlogImage.jpg

AEM 6550 - React SPA Carousel with Nested Composite Containers as Slides by Sreekanth Choudry Nalabotu

Abstract

Create a React SPA Generic Carousel using Slick JS library. The carousel component can be used to play slides with simple components (text, image etc..) or complex containers. For a sample nested composite positioning components container

Solution

1) Create the project structure (for both React SPA and traditional MPA authoring) with the following command, using maven archetype - https://github.com/adobe/aem-project-archetype

mvn -B archetype:generate -D archetypeGroupId=com.adobe.granite.archetypes -D archetypeArtifactId=aem-project-archetype
-D archetypeVersion=23 -D aemVersion=6.5.0 -D appTitle="Experience AEM SPA React" -D appId="eaem-sites-spa-how-to-react" -D groupId="com.eaem"
-D frontendModule=react -D includeExamples=n -D includeErrorHandler=n -D includeDispatcherConfig=n

2) Remove all additional components created, except the following required for testing... (or download Package Install)

/apps/eaem-sites-spa-how-to-react/components/spa
/apps/eaem-sites-spa-how-to-react/components/page
/apps/eaem-sites-spa-how-to-react/components/text

3) Add a client library /apps/eaem-sites-spa-how-to-react/clientlibs/clientlib-vendor with categories = [eaem-sites-spa-how-to-react.vendor], in your project to serve the slick JS library

4) Add the clienlib-vendor as a dependency for site base clientlib /apps/eaem-sites-spa-how-to-react/clientlibs/clientlib-base by adding the property dependencies = eaem-sites-spa-how-to-react.vendor

Read Full Blog

AEM 6550 - React SPA Carousel with Nested Composite Containers as Slides

Q&A

Please use this thread to ask the related questions.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Reply
marcjermaine
Level 2
Level 2

I tried to load their package into our local AEM. No carousel component can be seen and I can't add any components onto the site. Any advice on how to fix this? Thank you!

 

carousel.PNG