Skip to main content

Carousel component

Add interactive carousels with cards to your e-Detailers and e-Detailer briefs in Editor

Anna Voloshchuk avatar
Written by Anna Voloshchuk
Updated over a week ago

Available for e-Detailers and e-Detailer briefs

The CAROUSEL component allows you to present a set of customizable cards with the rotating slider.

To add this component to your item, drag CAROUSEL from the Components tab on the elements panel to the item layout.

Go to the Properties tab to configure the carousel component you select on the layout.

  • View and change the component name. It appears on the Tree tab of the elements panel in Editor.

  • Choose the carousel rotation axis: Vertical or Horizontal.

  • Select the carousel rotation direction: Clockwise, Counterclockwise, or Both.

  • Set the carousel perspective percentage in the SHIFT field. The value must be a positive number. It correlates with the carousel rotation radius value.

  • Define the rotation speed value in ROTATION SPEED.

  • Set the carousel rotation radius.

  • Select the Pin snap point checkbox to center the card on which you stop the carousel rotation in the PREVIEW mode.

  • Define the carousel's starting card number with the STARTING CARD option. By default, the carousel rotation in the PREVIEW mode starts with the first card that corresponds to the "0" STARTING CARD value in the EDIT mode.

On the Properties tab, you can customize the carousel cards individually:

1. Go to the CARDS section.

Here you can apply the following actions:

Click

Action

Add a new card to the carousel

Unfold the required card options

Duplicate the required card

Delete the existing carousel card

2. Unfold the card and configure its parts according to the requirements.

You can configure the carousel position and style, add actions and animation to it on the dedicated Editor tabs.

You can also add references for carousel card texts.

Configure card header

• Select whether to show the header on the layout.

• Enter the header text and edit it with the WYSIWYG editor. You can BROWSE for the required text in the Assets pop-up.

• Apply the dark background to your header text box to improve the visibility of the light-colored text.

• Choose the header color from the color picker palette.

Configure card image

  • Select whether to show the image on the layout.

  • Save the added image to your Library with the button.

    The file is stored in the size and format used in the content item type.

    Its name is generated automatically. If the image metadata doesn't contain a human-readable name, the system generates one using the word "editor" and a unique ID.

  • Browse for the image in My library, Veeva Vault, or on your device.

  • Hover over the image box to edit the selected image.

  • Update or add texts on the image using the EDIT IMAGE TEXT button.

Configure card text

  • Select whether to show the paragraph text on the layout.

  • Enter the paragraph text and edit it with the WYSIWYG editor. You can also BROWSE for the required text in the Assets pop-up.

  • Set the paragraph background color.

Did this answer your question?