Article summary

Summary Discusses how to work with the Adobe Experience Manager Carousel Core Component. 
Digital Marketing Solution(s) Adobe Experience Manager 6.4.2
Audience Developer
Required Skills HTML
Version 6.4.2

Note:

You will need to install Core Components 2.2.2 with AEM 6.4.2.0 (or higher) or AEM 6.3.3.0 (or higher). Refer to the core components documentation for further details.

Introduction

You can use the Adobe Experience Manager Carousel Core component to add carousel functionality within your Experience Manager site. The Carousel core component has these feautures: 

  • Allowed components can be configured through policy configuration.
  • Carousel navigation via next/previous and position indicators.
  • Carousel autoplay with:
    • Configurable delay.
    • Ability to disable automatic pause on hover.
    • Pause/play buttons.
    • Automatic pausing when the document is hidden,
  • Editing features for items (adding, removing, editing, re-ordering).

The following illustration shows the Carousel Core Component

pic1
The Experience Manager Core Carousel component

Note:

This articles uses a Maven Archetype 15 project that includes the Carousel Core component. Aslo, ensure that you have AEM 6.4.2. 

This article walks you through how to create an Experience Manager Project that uses the Carousel Core component. 

Create an AEM Maven 15 archetype project

You can create an Experience Manager archetype project by using the Maven archetype plugin. In this example, assume that the working directory is C:\AdobeCQ.

M10
Files generated by Maven 12 Archetype

Note:

To successfully run a Maven command, you must setup Maven. If you have not, see this document: Setup Maven in your development environment

To create an Experience Manager archetype project, perform these steps:

1. Open the command prompt and go to your working directory (for example, C:\AdobeCQ).

2. Run the following Maven command:

mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate -DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-project-archetype -DarchetypeVersion=15 -DarchetypeCatalog=https://repo.adobe.com/nexus/content/groups/public/

3. When prompted, specify the following information:

  • groupId - AEMMaven15
  • artifactId - AEMMaven15
  • version - 1.0-SNAPSHOT
  • package -  com.adobe.community
  • appsFolderName - AEMMaven15
  • artifactName - AEMMaven15
  • componentGroupName - AEMMaven15
  • cssId - AEMMaven15
  • packageGroup - AEMMaven15
  • siteName - AEMMaven15

4. WHen prompted, specify Y.

5. Once done, you will see a message like:

[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:42 min
[INFO] Finished at: 2016-04-25T14:34:19-04:00
[INFO] Final Memory: 16M/463M
[INFO] ------------------------------------------------------------------------

6. Change the working directory to AEMMaven15 and then enter the following command.

mvn eclipse:eclipse

After you run this command, you can import the project into Eclipse as discussed in the next section.

Add Java files to the Maven project using Eclipse

To make it easier to work with the Maven generated project, import it into the Eclipse development environment, as shown in the following illustration.

Project
Eclipse Import Project Dialog

Note:

At this point in a Helpx article, you typcially modify Java code. However, for this use case, there is no Java to modify. The only thing you can perform in the Eclipse environment is to modify the Core POM file. 

Modify the Maven POM file

Add the following POM dependency to the POM file located at C:\AdobeCQ\AEMMaven15.

<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.0</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>
                
  <dependency>
       <groupId>org.apache.geronimo.specs</groupId>
       <artifactId>geronimo-atinject_1.0_spec</artifactId>
       <version>1.0</version>
       <scope>provided</scope>
   </dependency>

When you add new Java classes under core, you need to modify a POM file to successfully build the OSGi bundle. You modify the POM file located at C:\AdobeCQ\AEMMaven15\core.

The following code represents this POM file.

<?xml version="1.0" encoding="UTF-8"?>
<!--
 |  Copyright 2017 Adobe Systems Incorporated
 |
 |  Licensed under the Apache License, Version 2.0 (the "License");
 |  you may not use this file except in compliance with the License.
 |  You may obtain a copy of the License at
 |
 |      http://www.apache.org/licenses/LICENSE-2.0
 |
 |  Unless required by applicable law or agreed to in writing, software
 |  distributed under the License is distributed on an "AS IS" BASIS,
 |  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 |  See the License for the specific language governing permissions and
 |  limitations under the License.
-->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>AEMMaven15</groupId>
        <artifactId>AEMMaven15</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>AEMMaven15.core</artifactId>
    <packaging>bundle</packaging>
    <name>AEMMaven15 - Core</name>
    <description>Core bundle for AEMMaven15</description>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.sling</groupId>
                <artifactId>maven-sling-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>org.apache.felix</groupId>
                <artifactId>maven-bundle-plugin</artifactId>
                <extensions>true</extensions>
                <configuration>
                    <instructions>
                        <!-- Import any version of javax.inject, to allow running on multiple versions of AEM -->
                        <Import-Package>javax.inject;version=0.0.0,*</Import-Package>
                        <Sling-Model-Packages>
                            com.adobe.community.core
                        </Sling-Model-Packages>
                    </instructions>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- OSGi Dependencies -->
         <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>apis</classifier>
        </dependency>
     
        <dependency>
            <groupId>org.apache.geronimo.specs</groupId>
            <artifactId>geronimo-atinject_1.0_spec</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.cmpn</artifactId>
        </dependency>
        <dependency>
            <groupId>org.osgi</groupId>
            <artifactId>osgi.annotation</artifactId>
        </dependency>
        <!-- Other Dependencies -->
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-api</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.jcr</groupId>
            <artifactId>jcr</artifactId>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
        </dependency>
        <dependency>
            <groupId>com.adobe.aem</groupId>
            <artifactId>uber-jar</artifactId>
            <classifier>apis</classifier>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.models.api</artifactId>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mockito</groupId>
            <artifactId>mockito-core</artifactId>
        </dependency>
        <dependency>
            <groupId>junit-addons</groupId>
            <artifactId>junit-addons</artifactId>
        </dependency>
        <dependency>
            <groupId>org.apache.sling</groupId>
            <artifactId>org.apache.sling.testing.sling-mock</artifactId>
        </dependency>
        <dependency>
            <groupId>uk.org.lidalia</groupId>
            <artifactId>slf4j-test</artifactId>
        </dependency>
    </dependencies>
</project>

Deploy the Project to Experience Manager

To build the OSGi bundle by using Maven, perform these steps:

  1. Open the command prompt and go to the C:\AdobeCQ\AEMMaven15.
  2. Run the following maven command: mvn -PautoInstallPackage install.
  3. The OSGi component can be found in the following folder: C:\AdobeCQ\AEMMaven15\core\target. The file name of the OSGi component is AEMMaven15-1.0-SNAPSHOT.jar.

The command -PautoInstallPackage automatically deploys the OSGi bundle to Experience Manager.

Add the Carousel component to a page

By default, a Maven Archetype project creates a starting page. This is the page to which the Carousel component is added. The default page is located at the following URL: 

http://localhost:4502/editor.html/content/AEMMaven15/en.html

While in Edit Mode, open the side rail and drag and drop the Carousel component into the page, as shown in this illustraton. 

CarComponent
Dragging and dropping the Carousel component into an Experience Manager page

After you place the Carousel component onto the Experiecne Manager page, you can populate the component with images from the DAM (other other locations). In this article, images from the DAM are added to the component. To perform this task, you need to add image component to the Carousel component as shown in this video. 


See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy