Media Carousel Component

The Media Carousel component lets you display media and text items in a carousel to your learners.

This article provides an overview of the Media Carousel component, component setup and behavior, and examples of Media Carousel component configurations.

Component overview

The Media Carousel component is an interactive component that lets you display media and text items in a carousel to your learners. The Media Carousel component can show items with text and image, video, or audio as the media type.

The Media Carousel component is fully responsive and allows you to select the position of the media relative to the text for each Media Carousel component item.

Component set up

Follow these steps to add the Media Carousel component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Media Carousel component.
3. Click the Media Carousel component and select Add Left, Add Full, or Add Right.

Click the Edit Component icon on the newly added Media Carousel component to begin set up.

General section

In the General section:

Add Media Carousel Title, or a Media Carousel Display Title, as needed. Media Carousel Display Title is seen by learners.

Scroll down and add your Media Carousel Body. Use the text editor to style and format your text, as needed.

1. Add Media Carousel Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Add Next Slide Button Aria Label, as needed.
4. Add Previous Slide Button Aria Label, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Media Carousel component that can display an icon and label prior to the Media Carousel component completion, which changes to a different icon and label once the Media Carousel component is completed.

Add Media Carousel Items

In the Items section, you Add Media Carousel Items to your Media Carousel component.

In the General section:

1. Add Item Title. This is the item title.
2. Add Item Body. This is the item body text. Use the text editor to style and format your text, as needed.

In the Behaviour section:

In the Behaviour section, select Media Type. You can select Image, Video, Videostream, Audio, or Gif  to be included in the Media Carousel Item.

Select Position of Item Media. This is where your Media will be positioned in the Media Carousel Item. You can choose to display the Media top, bottom, left, or right, relative to the text.

In the Media section:

To add an Item Image to the Media Carousel Item, do the following:

1. Select an Item Image to display.
2. Scroll down to Item Image Advanced Settings if you want to toggle to Set Image Per Device Size.
3. Toggle View Image in Lightbox, to enable this setting.
4. Add Item Image Alt Text, as needed.

To add a Video to the Media Carousel Item, do the following:

1. Select or upload an Item Video.
2. Add an Item Video Poster Image.
3. Add Label, as needed.
4. Add Subtitle, as needed.
5. Add Item Video Transcript, including Item Video Transcript Button Text and Item Video Transcript Text, as needed.

Heads up!

Regarding Item Video Subtitles - Due to browser restrictions, subtitle files cannot play in offline courses. Try using the transcript instead if offline is required.

To add a VideoStream to the Media Carousel Item, do the following:

1. Set the Video player service used for your video. Video players' services options are YouTube, Vimeo, Brightcove, Wistia, and Vidyard.
2. Enter Video Embed Code.
3. Set and enable all other options for your Item Video Stream.

To add a Gif to the Media Carousel Item, do the following:

1. Select Item Gif to be displayed.
2. Add Item Gif Alt Text for accessibility, as needed.

To add Audio to the Media Carousel Item, do the following:

1. Select Item Audio.
2. Add an Item Audio Poster Image.
3. Add Item Audio Transcript, including Item Audio Transcript Button Text and Item Audio Transcript Text, as needed.

Add, duplicate, or delete Media Carousel Items as needed.

Component Examples

The Media Carousel component gives you a lot of flexibility. Below are examples that illustrate different Media Carousel component configurations:

Example 1 – Media Carousel Item displaying text and image. The image is positioned to the right.

Example 2 – Media Carousel Item displaying text and video. The video is positioned at the bottom.

Example 3 – Media Carousel Item displaying text and audio. The Audio is positioned to the left.

Appearance section

In the Appearance section, you select Vertical alignments of items. Select from the options Top, Center, or Bottom . The default setting is Top.

Animations section

In the Animations section, you set what animations to run for the next item in the Media Carousel component.

Toggle to display Next Button Animation. Enabling this displays a pulse animation on the “next” button until it is clicked.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.