Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Carousel

Carousel

Display multiple images in a carousel format. The images do not automatically change; the visitor uses arrows or pagination links to change images manually. 

carousel-example
Figure 1: Example of a Carousel component, including pagination arrows and a caption.

 

Component Information

Benefits

  • Carousels are commonly used as a photo gallery.
  • Carousels can be used on standard pages or story pages.

Live Examples

Frequently Asked Questions

Instructions for Use

In Pages:

  1. Select the page in the content tree.
  2. Click “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Carousel component from list.

Alternate method:

  1. Click Components tab at top of the content tree.
  2. Locate Carousel component.
  3. Drag the Carousel component to any empty placeholder area of the page below the Breadcrumb links.

If this is new Carousel content:

  1. Click “+” next to Data
  2. Select Carousel with Slide
  3. Enter a unique name for the data
  4. Click Assign 

If using existing Carousel Data (content):

  1. Select the data item from the tree
  2. Click Assign
Note: To add a title or description for the overall carousel, enter them by selecting the component in Content Editor or Explorer.

In Pages:

  1. Click the Carousel component to display the toolbar.
  2. In “Carousel” right column, expand Manage items.
  3. Rename Slide 1, which is automatically created, as needed: Click “…” to right of Item and give it a new name.
  4. To add more slides: 
    1. Click “+ Add new” and click Carousel Slide button. 
    2. Give it a unique name.
  5. To rename a slide: Click “…” to right of the item and give it a new name.
  6. To delete a slide: Click “…” to the right of the item and delete it.
  7. To reorder slides: Click “…” and use the up and down arrows to change the tab order.
Note: Initially, a Carousel slide appears without content. The content area contains an image placeholder and slide pagination arrows.

  1. Click the pagination arrows to navigate to a slide.

    pagination-carousel
    Figure 2: The pagination arrows on a Carousel are used to navigate to images.

  2. Click on the Image placeholder icon in the page layout.

    image-placeholder-carousel
    Figure 3: The Image placeholder icon in a Carousel slide that does not have an assigned image.
  3. In the right panel, click on the Add button.
  4. Select an image in the Media Library or upload an image.
  5. Click Add Selected.
  6. To add an additional slide, under Manage Items, click on the Add New button.
  7. Repeat for additional slides.
Note: Image captions must be entered using Content Editor or Explorer. The display of the image caption is controlled by the variant (e.g., Right Aligned or Center Portrait)
  1. Click the Carousel to display the toolbar.

  2. Click the Explorer icon.

    carousel-explorer-icon
    Figure 4: The Explorer icon in the Carousel toolbar.
  3. In left pane, locate the Carousel and click to select.

    1. Edit the Carousel title, if desired.

      carousel-explorer-title
      Figure 5: In this example, the Carousel component has been selected for editing.

  4. Locate and click the slide to select it.

    carousel-explorer-slide
    Figure 6: In this example, the first slide of the Carousel has been selected for editing.
  5. Make changes in the right pane.
    1. Change orientation.
    2. Upload or select an image from the Media Library.
    3. Add an image caption.
  6. To add additional slides:
    1. Click “+ Create” in the content column.
    2. Click Carousel Slide.
    3. Give the content a unique name and click the checkmark icon.
    4. Add content in the right pane.
  7. To edit existing Carousel slide:
    1. Click a Carousel slide item in Carousel panel column.
    2. Change content in right pane.
  8. To duplicate a Carousel slide:
    1. Click a Carousel item in Carousel slide column.
    2. Click “…” in right pane.
    3. Click Duplicate.
  9. To delete a Carousel slide:
    1. Click a Carousel item in Carousel slide column.
    2. Click “…” in right pane.
    3. Click Delete.
  10. Return to Pages by closing the Explorer browser tab.
  11. Refresh the screen.
  12. Preview and publish the page.

Locate the Carousel

In Pages:

  1. In Pages, click 9-dot cube in upper left.
  2. Select environment.
  3. Select Content Editor. It opens in a new browser tab.

In Content Editor:

  1. If the Carousel does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
  2. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data.
  3. Locate and expand the Carousel component.

Add a Slide

  1. Right-click the Carousel component.
  2. Select Insert, then select Carousel Slide. 
  3. Add content in the main pane on the right side.
Note: New slides can also be created by duplicating an existing slide, then changing the name and content.

Edit a Slide

To edit an existing slide:

  1. Click on the slide in the Content Tree.
  2. Change as needed in the main content pane on the right side.
    1. Change orientation. 
      1. Change image.
      2. Add a caption.

Tips for Using Images

  • Alt Text can be changed in Explorer or Content Editor.
  • An image size can be changed in Content Editor > Image > Properties. HTML uses width and height attributes.
  • The image margin (i.e., padding) can be changed in Content Editor > Image > Properties.

Delete a Slide

  1. Locate and expand the Carousel component.
  2. In the Content Tree, right-click the slide.
  3. Click Delete and confirm.

Delete the Carousel

  1. In the Content Tree, right-click the carousel.
  2. Click Delete and confirm.

Publish Changes

When done with content authoring activities:

  1. Return to Pages by closing the Explorer browser tab.
  2. Refresh screen to see changes.
  3. Preview and publish the page.

Carousel Variants

A screenshot of a carousel component using the Center Portrait Aligned variant. The photo appears in the center with a portrait orientation. The caption line and pagination arrows appear below the photo. In this slide, a photo of The Spartan Statue is shown.Figure 7: The Center Portrait variant of the Carousel component.
A screenshot of a carousel component using the Center Aligned variant. The photo appears in the center with a caption box and pagination arrows below the image. In this slide, a drone photo of the intersection of Kalamazoo Street and Beal Street is shown.Figure 8: The Center Aligned variant of the Carousel component.
A screenshot of a carousel component using the Center Left Aligned variant. The photo appears on the left with a caption box and pagination arrows on the right. In this slide, a photo of the Hannah Administration Building plaza is shown.Figure 9: The Left Aligned variant of the Carousel component.
A screenshot of a carousel component using the Center Right Aligned variant. The photo appears on the right with a caption box and pagination arrows on the left. In this slide, a photo of a lantern against a backdrop of tree branches and a blue sky is shown.Figure 10: The Right Aligned variant of the Carousel component.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Add title to component OptimalPossible
Add description to component OptimalPossible
Add slideOptimalPossiblePossible
Add caption to slide OptimalPossible
Rename slideOptimalPossiblePossible
Duplicate slide PossiblePossible
Reorder slideOptimalPossiblePossible
Delete slideOptimalPossiblePossible
Add content to slide*OptimalPossiblePossible

*Add content type and then follow component-specific instructions

 

Documentation updated: August 6, 2024

XMC Component Guide