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
BedrockMission!

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

Avatar

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,158 likes

Total Posts

6,255 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,158 likes

Total Posts

6,255 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

21-09-2020

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.

AEM AEMEBlogSeeding Experience Manager

Replies

Avatar

Avatar
Validate 1
Level 1
marcjermaine
Level 1

Likes

3 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Give Back
Boost 3
Boost 1
Applaud 5
View profile

Avatar
Validate 1
Level 1
marcjermaine
Level 1

Likes

3 likes

Total Posts

4 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Give Back
Boost 3
Boost 1
Applaud 5
View profile
marcjermaine
Level 1

27-09-2020

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