Image Slider Component

This component is NOT recommended for use when creating accessible courses.

This article covers the Image Slider component and how it works within an Evolve course.

Overview

The Image Slider component allows learners to use a slider control to switch between foreground and background images that are placed on top of one another. PNG, JPEG, and GIF images can be used for this component. For greater accessibility, it can be operated by keyboard.

With this component, you can do the following:

• Set the slider to move horizontally or vertically

• Set where the slider initially appears across the image (e.g., 75% of image A appears, and 25% of image B, or 100% of Image A, etc)

• Automatically set the size to match the component width set in your course

You can add and edit the following component information:

• Image Slider Title

• Image Slider Display Title (visible to learners).

• mage Slider Body text

• Image Slider Instruction Text that tells learners how to use the component.

• Aria Label for screen readers, if applicable.

Things to Note

In addition to the above, the Interaction Label is included in every component and allows you to add a widget before or after the component that can display an icon and label prior to component completion, which changes to a different icon and label once the component is completed.

Foreground & Background Graphics

Click the + or Edit Component icon to add your Foreground and Background Graphics, as well as make further changes to the component, i.e. title and display title.

In addition to adding graphics, you have the ability to include Alt Text for screen readers. Please note that the recommended minimum width for images is 1024 pixels.

Configuration Settings

In the Image Slider tab, you can configure the remaining Image Slider options:

• Handle Color: Set the color for the handle that learners use to switch between the background and foreground images. Though it’s set to white by default, you can use the color picker to change the default option. Please note: If you have set a Course Focus Outline Color in your theme (found in Appearance > Course > Accessibility) and left the handle color as the default, the handle will display the color specified as your Focus Outline Color. If you set a specific color within the component using this setting, it will override the theme setting.

• Initial Position: This allows you to set where the handle sits on the image when learners first arrive at the component. You can enter values from 0-100. The default value of 75 means that 75% of the Foreground Graphic and 25% of the Background Graphic will be visible.

• Slide orientation: This allows you to set whether the slider should move from left to right or top to bottom.

• Slider handle ARIA label: This allows you to set instructions for screen reader users on how to use the handle. There is a default text of ‘Use the cursor keys to move the image slider’ but this can be changed to any required text.

Did this article help?

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