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

carousel component

Avatar

Avatar
Validate 10
Level 2
rahul_kumar11
Level 2

Likes

3 likes

Total Posts

36 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 10
Level 2
rahul_kumar11
Level 2

Likes

3 likes

Total Posts

36 posts

Correct Reply

0 solutions
Top badges earned
Validate 10
Validate 1
Boost 3
Boost 1
View profile
rahul_kumar11
Level 2

15-10-2015

Hello freinds,

How to add different components like videos,images,graph etc to a carousel component.

 

Thanks,

kumar.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-10-2015

We based a community article on this use case. See this article: http://scottsdigitalcommunity.blogspot.ca/2013/09/creating-custom-carousel-component-for.html

This article walks you through how to create a custom carousel for AEM using JQuery and using digital assets located in the AEM DAM:

[img]carousel.png[/img]

HTH,

Scott

Answers (6)

Answers (6)

Avatar

Avatar
Validate 1
Level 2
titusrk
Level 2

Likes

2 likes

Total Posts

16 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 2
titusrk
Level 2

Likes

2 likes

Total Posts

16 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
titusrk
Level 2

05-06-2018

Hi Kumar,

I am using AEM 6.3

Avatar

Avatar
Validate 25
MVP
Ratna_Kumar
MVP

Likes

158 likes

Total Posts

755 posts

Correct Reply

134 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile

Avatar
Validate 25
MVP
Ratna_Kumar
MVP

Likes

158 likes

Total Posts

755 posts

Correct Reply

134 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give Back 50
Give Back 5
View profile
Ratna_Kumar
MVP

05-06-2018

Hi,

Which version of AEM you are using and also let us know whether you are using OOTB carousal component?

Thanks,

Ratna Kumar.

Avatar

Avatar
Validate 1
Level 2
titusrk
Level 2

Likes

2 likes

Total Posts

16 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 2
titusrk
Level 2

Likes

2 likes

Total Posts

16 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
titusrk
Level 2

05-06-2018

//The general Carousel component is basically a list of pages that takes the image from the Page Properties of the page and outputs them into a Carousel.//

Hi
General carousel Component, is it working properly....?

I was unable to output them into a Carousel.

I created two sample test pages consisting of one image each.

and i added to URL for the pages into my Carousel component as fixed list.

and carousel wasn't generated

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

15-10-2015

What I love about AEM from a developer point of view is using Java  to write custom OSGi back-end services and JS technology to write custom front end components. For example -- using JQuery plugins. (then AEM authors can use your custom components when designing AEM web sites). 

TO use JQuery -- you setup a client libs folder and properly setup the client JS files (we have plenty of articles that show how to do this). 

Having said that -- to create a Caroursel that supports other type of data such as videos, all you do is get a JQuery plugin that supports videos. There are all sorts of these plug-ins. See this link for example:

http://codegeekz.com/18-best-jquery-carousel-plugins/

Then follow this article and substitute the plugin. That is, make sure you place the new plugib JS file in the clientlibs folder and modify the AEM page component's JS logic (use the JS logic that corresponds to the plug-in you choose).  Consult the documentation of the plugin that you use.  

HTH

Scott

 

 

 

 

Avatar

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
om_vineet
Level 2

Likes

3 likes

Total Posts

29 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 3
Boost 1
Affirm 1
View profile
om_vineet
Level 2

15-10-2015

Hey Scott,

Your example is helpful but it shows the carousel with images only. What about videos, RTE etc since its been old days that carousel used to have just images. Can we have a carousel of components like adaptive-image, video, RTE etc. components?

Avatar

Avatar
Validate 1
Level 1
SLIM_20
Level 1

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
SLIM_20
Level 1

Like

1 like

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
SLIM_20
Level 1

15-10-2015

Hi Kumar,

The foundation Carousel component cannot do this.  The general Carousel component is basically a list of pages that takes the image from the Page Properties of the page and outputs them into a Carousel.

You would have to create your own custom component to add your own videos/images/graphs/etc...

 

Thanks,

Steve