Customer Success Center

Login Sign up

Components | Carousel

Modified on: Thu, 21 Dec 2023 1:55 PM

"Carousel" is a type of component that shows images, audios and videos. It is like the "Image Gallery" component, but this component also supports different types of resources apart from images.
This component is added within the screens by default (See here), but it can also be added inside other components (for example, inside a Row).
You will find this component in the group of "Multimedia" components.



Setup process

1. We will include resources in the "Add" tab, using the following buttons: "Image", "Video", "Audio", "External animation" or "educaPlay".

2.  We use the "Properties" tab to configure the parameters of our carousel.

3. Click on each of the resources included in the "Properties" tab to adjust parameters. Remember you will need to give a title to each component, so you can distinguish it quickly when rolling the cursor over its miniature.

4.  Each element included in the carousel can have a caption. In order to do so, select the resource, go to the "Add" tab and click on "Caption".



Properties

PROPERTY

DESCRIPTION

Width

This property allows changing the space occupied by a component inside a central column of contents. The component occupies 100% of the space by default, but size can be reduced to other preset percentages or can be displayed in "full-size". Some quote styles may overlap the central column if "Full" width is chosen.

Align

This property allows placing the component on the right, on the left or on the centre of the central column where contents are shown. It can only be used when applied "Width" is less than 100%.

Float

It allows inserting a component and "wrap" it with a text.

  1. First, we should select a size percentage under 100% in "Width" property (25%, for instance).
  2. "Float" property allows us to decide where we would like to put the floating component (on the right or on the left of the text).
  3. We use arrows to move the component and put it on the text.

Type of miniature

This property allows us to choose the type of miniature we want to add to the carousel navigation bar. There are two types of miniatures:

  • Images: we can choose an image for each resource.
  • Standard icons for each resource.

    Remember: If you choose Image miniatures, images will be automatically shown when selecting the "Image"component; a cover will appear instead when selecting the "Video" component. You will need to access to the rest of components (Audio, External animation and educaPlay) and configure their "Miniature image".

Miniatures per page

Only avaliable in Tokyo Template. This property allows choosing the number of miniatures included in each carousel page.

Position of miniature

This property allows ordering miniatures within the carousel. There are three possibilities:

  • Top: miniatures are located on top of the carousel.
  • Bottom: miniatures are located at the bottom of the carousel.
  • None: miniatures are deleted from the carousel.

Show navigation arrows

This property allows us to decide whether we want to show navigation arrows within the carousel
Show border Only avaliable in Tokyo template. Show a border around the component. 
Was this answer helpful?