Panel - Slider

ID=182

This panel enables the display of a slider featuring images and videos, with the functionality of overlaying text directly onto each image or video.

Panel Settings

Display

There are two options available on how to display the slider in the learner front-end:

Screen width: The slider content will cover the whole screen width
Content width: The slider content will have the size of the content uploaded

Height

Keeps the image or container at a specific height, no matter what content is inside. The size won’t change automatically. The image will still try to keep its original shape, but it might be cropped or have extra space if it doesn’t fit exactly.

Force to adaptive height

This option takes the height of the image or container and automatically adjusts it to fit its content. If a specific height is configured, it will ignore it. It also keeps the image's original shape and proportions, so nothing gets stretched or squished.

Infinite Slider

It displays arrow-based navigation at the top of the carousel. The navigation is continuous, starting again from the beginning when the end of the list is reached.

Text overlay

If text is entered, it can be configured to specify the position of the content (image or video).

Bottom left: Text is positioned in the bottom left of the slider.
Centered: Text is positioned in the center left of the slider.
Bottom right: Text is positioned in the bottom right of the slider.

Contents

In the contents tab, two items can be selected and configured for presentation in the slider.

• Image

• Video

The configuration for each item adheres to the same structure:

Show from

This setting allows for establishing of a date for when the item is displayed in the slider.

Show until

This setting allows for the establishment of a date until the item is displayed in the slider.

Display text

Text displayed in the image can be added. This text appears based on the “Display text position" found in the description tab.

Hints & Tips

It is possible to display a button as a Call to Action on the slider within the text box.
This can be achieved by using the “source” tab in the text-rich editor, adding the following CSS tag, and exchanging the URL and the button text. Make sure the “...” are still available after the exchange.

<a class="ImcButton" href="https://www.google.com" target="_blank">Button test</a>

Related Functions