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. 

A screenshot of a carousel slide featuring an aerial photo of the Hannah Administration Building.
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 Page Builder:

  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 by filling in the specific fields in the Content Tab of the component options panel in Page Builder.

In Page Builder:

  1. Click the Carousel component to display the toolbar.
  2. In “Carousel” right panel menu, click the Design tab.
  3. Click to expand Manage items.
  4. Rename Slide 1, which is automatically created, as needed: Click “” to right of Item, click Rename and give it a new name.
  5. To add more slides:
    1. Click “+ Add new” and click Carousel Slide button.
    2. Give it a unique name.
  6. To rename a slide: Click “” to right of the item and give it a new name.
  7. To delete a slide: Click “” to the right of the item and delete it.
  8. 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.

In Page Builder:

  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. 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. In “Carousel” right panel menu, click the Design tab.
  3. Click to expand Manage items.
  4. Click the three dots icon on a slide to open the manage items menu.
  5. Click Open in Explorer.
  6. Click the Explorer icon.
  7. In left pane, locate the Carousel and click to select.
    1. Edit the Carousel title and description, if desired.
  8. Locate and click a slide to select it.
  9. Make changes in the right pane.
    1. Change orientation.
    2. Upload or select an image from the Media Library.
    3. Add alt text.
    4. Add an image caption.
  10. 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.
  11. To edit existing Carousel slide:
    1. Click a Carousel slide item in Carousel panel column.
    2. Change content in right pane.
  12. To duplicate a Carousel slide:
    1. Click a Carousel item in Carousel slide column.
    2. Click “…” in right pane.
    3. Click Duplicate.
  13. To delete a Carousel slide:
    1. Click a Carousel item in Carousel slide column.
    2. Click “…” in right pane.
    3. Click Delete.
  14. Return to Page Builder by closing the Explorer browser tab.
  15. Refresh the screen.
  16. Preview and publish the page.

Locate the Carousel

In Page Builder:

  1. In Pages, click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left..
  2. 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 > site name > 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 Page Builder 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 4: 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 5: 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 6: 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 7: The Right Aligned variant of the Carousel component.

Image Specifications

Sketch Link: Carousel Component Design

Carousel Images – Landscape

  • Desktop – Width: 1170px | Height: 561px
  • Tablet – Width: 555px | Height: 312px
  • Mobile – Width: 100% | Height: 209px
  • Recommended size – Width: 1200px | Height: 600px

Carousel Images – Portrait

  • Desktop – Width: 434px | Height: 559px
  • Desktop – Width: 434px | Height: 559px
  • Mobile – Width: 100% | Height: 398px
  • Recommended size – Width: 500px | Height: 600px

Tool Use Guide

 

Documentation updated: Apr. 13, 2026

Is there an issue with this documentation? Report it here.