The Carousel component allows you to a display a selection of rotating images with a title, brief description and link to an associated story, event, program or project page elsewhere in your site.

The component displays a series of images that slide or fade out, one at a time, in an order you specify. Clickable controls also let visitors cycle through the displayed pages on demand. Clicking on the title link takes you to that page.

Note: You can also set the Carousel to display videos instead of images. This could be useful when there is a featured video for the associated story, event, program or project page.

View a demo of the Carousel component.

When should it be used?

Use a Carousel component when you have a set of featured pages with images/videos that you want to display from another page. The Carousel component typically resides on your site's home page, but can be placed on any page in your site.

Creating destination pages

The first step is to create the 'destination' pages that your Carousel component will draw its images/videos and descriptions from. These pages will be linked from the Carousel:

    Setting up an Image Carousel   

1. Create the first destination page in the WCM. (See Creating a New Page for more information.)
2. Double-click on the page to open it in the page editing environment.
3. Using the Content Finder, locate the image that will be displayed in the Carousel component.
4. In the Sidekick, click the Page tab and click the Page Properties... option.
5. Click the Image tab, then drag the image from the Content Finder into the Image tab. Set the aspect ratio of the image by clicking the Crop button. Choose the 3:2 (Carousel) option. To learn more about cropping an image with an aspect ratio, visit Using the Image Component.
   
6. After the image is cropped, click the Basic tab. Expand the 'More Titles and Description' section. In the Description field, type a short description to appear as a caption below the image. The description should not exceed 160 characters (25-30 words) or it may be cut off in the Carousel.
   
7. Add content to the page (title, text, images, etc.) as normal.

    Setting up a Video Carousel

1. Create the first destination page in the WCM. (See Creating a New Page for more information.)
2. Double-click on the page to open it in the page editing environment.
3. In the Sidekick, click the Page tab and click the Page Properties... option.
4. Click the Advanced tab, and expand the Video option. Enter the video link of the video you wish to be shown on the carousel in the field.
5. After entering the video link, click the Basic tab. Expand the 'More Titles and Description' section. In the Description field, type a short description to appear as a caption below the image. The description should not exceed 160 characters (25-30 words) or it may be cut off in the Carousel.
   
6. Add content to the page (title, text, images, etc.) as normal.

Note that neither the image/video nor the description will appear anywhere on the destination page. They will be accessed and displayed by the Carousel component only. If you wish to display these on your destination page, simply drag an Image component on to the page to the add the image and a Text component to add the description. For videos, simply drag an External Video component on to the page.

Sizing your images

Instead of sizing your images with an image editing tool, crop the image using one of the preset aspect ratios within AEM – read Cropping an Image to learn how. For pages using the Three Column template, or with the third column enabled, images should be cropped with the 3:2 (Carousel) option. If the Carousel component is to be displayed on a Basic page template, without a third column, you'll need to apply the 'wideCarousel' style to the CSS class field. In this case your images should be cropped with the 5:2 (Wide Carousel) option to stretch across the full width of the screen.

Note: Remember to upload the highest quality images you have to the DAM.

Styles

wideCarousel

Add this style to a Carousel component that stretches across the full width of the content area on pages that do not include a third column. Make sure your images are cropped with the 5:2 (Wide Carousel) option. The wideCarousel style will crop the contents of your Carousel's title/description area as well so be sure to use short titles and descriptions.

narrow-carousel-image

This style causes the grey text block to move under the image when the browser width is less than 1200px instead of the default width of 1500px.

See CLF3 display options >

See CLF4 display options > 

Building the Carousel

Once your destination pages have been created, you can load them into a Carousel component:

1. Open the page that will house the Carousel component. Typically, this will be your site's home page, but the component can reside anywhere in your site.
2. Drag a Carousel component from the Sidekick on to the page where you want the Carousel to appear. Double-click the component to open it for editing.
   
3. In the Carousel tab, you can use the default controls/play speed options or modify them. (See Modifying your Carousel, below.)
4. Click on the List tab. Select Fixed List or Child Pages from the 'Build list using' drop-down menu. (See the List Component page for information on configuring lists.)
5. Click on the magnifying glass to navigate to the destination page(s). If you chose Fixed list, you will select each page individually; click on the [+] button to add another page. If you chose Child Pages, simply navigate to the parent page. (Note that the parent page will not appear in the Carousel.)

Modifying your Carousel

Basic modifications

The Carousel component has a number of configuration controls, including Play Speed, Transition Time, Animation and Randomize:

Play Speed
Sets the time (in milliseconds) before the next slide is shown. To slow down your Carousel slideshow, increase the value of this number. To speed it up, reduce the value.

Transition Time
Sets the amount of time (in milliseconds) for the transition between two slides to take place. To slow down the transition, increase the value of this number. To speed it up, reduce the value.

Animation
Sets the animation style between two slides. Slide moves a slide from right to left. Fade transitions to the next slide without any motion.

Randomize
Randomizes the order of the slides.

Linking to pages outside of AEM

You may wish to display a feature item that links to a page outside of AEM. To do this, you will need to create a redirect page. Create the destination page by following the steps outlined in the Creating destination pages section, above. Once the image and description has been added to the page:

1. Open the Page Properties component again and click on the Advanced tab.
2. In the Redirect field, type the absolute url for the page this page will automatically redirect to. Be sure to include http:// at the beginning of the url (e.g., http://www.sfu.ca).

Add the page to the Carousel component using the Fixed List option. The image and description will appear in the component but, when the user clicks on the image or the 'learn more' link, they will be taken to the external page.