wiz-card-carousel | Viseven Help Center

With the wiz-card-carousel component, you can create a carousel with pre-made cards that rotate vertically or horizontally.

Installation

To install the wiz-card-carousel component, run the following command in the root directory of your e-Detailer project:

wiz install @edetailer/wiz-card-carousel

For more information, see Install components.

Usage

TIP: As best practice, use eWizard Editor to add and edit the components.

To add the wiz-card-carousel component to your slide and change its properties, in the ./slides/default/index.vue file:

1) Add the <wiz-card-carousel></wiz-card-carousel> tag to your slide template.

<!--./slides/default/index.vue --><template>
<wiz-slide class="editable-block">
<wiz-card-carousel id="wiz-card-carousel-4c34" class="default"
:items="[
{
'__label':'Card 1',
'isHeaderVisible':true,
'header':$t('wiz_card_carousel_items_header_29d6'),
'headerColor':'#0288d1',
'isImageVisible':true,
'image':'node_modules/wiz-card-carousel/media/images/image.png',
'isParagraphVisible':true,
'paragraph':$t('wiz_card_carousel_items_paragraph_a7b0'),
'paragraphColor':'#ffffff','__id':'7-items-0'
},
{
'__label':'Card 2',
'isHeaderVisible':true,
'header':$t('wiz_card_carousel_items_header_69bc'),
'headerColor':'#0288d1',
'isImageVisible':true,
'image':'node_modules/wiz-card-carousel/media/images/image.png',
'isParagraphVisible':true,
'paragraph':$t('wiz_card_carousel_items_paragraph_36bb'),
'paragraphColor':'#ffffff',
'__id':'7-items-1'
},
{
'__label':'Card 3',
'isHeaderVisible':true,
'header':$t('wiz_card_carousel_items_header_1e84'),
'headerColor':'#0288d1',
'isImageVisible':true,
'image':'node_modules/wiz-card-carousel/media/images/image.png',
'isParagraphVisible':true,
'paragraph':$t('wiz_card_carousel_items_paragraph_e1cc'),
'paragraphColor':'#ffffff',
'__id':'7-items-2'
},
{
'__label':'Card 4',
'isHeaderVisible':true,
'header':$t('wiz_card_carousel_items_header_cc90'),
'headerColor':'#0288d1',
'isImageVisible':true,
'image':'node_modules/wiz-card-carousel/media/images/image.png',
'isParagraphVisible':true,
'paragraph':$t('wiz_card_carousel_items_paragraph_5912'),
'paragraphColor':'#ffffff',
'__id':'7-items-3'
}
]" 
orientation="vertical"
direction="clockwise"
:shift="2" 
:sensitivity="4" 
:radius="180"
:is-snap="true"
:current-item="1"
></wiz-card-carousel>
</wiz-slide>
</template>

The id attribute is required for the correct display of the component styles in eWizard Editor.

The __id attribute is required for the correct display of the card styles in eWizard Editor.

2) Add the card title and text to the <i18n></i18n> localization tag.

// ./slides/default/index.vue<i18n>
{
"eng": {
"wiz_card_carousel_items_header_29d6": "#1 Card Header",
"wiz_card_carousel_items_paragraph_a7b0": "<b>Paragraph Title</b><br/><br/>Lorem ipsum dolor",
"wiz_card_carousel_items_header_69bc": "#2 Card Header",
"wiz_card_carousel_items_paragraph_36bb": "<b>Paragraph Title</b><br/><br/>Lorem ipsum dolor",
"wiz_card_carousel_items_header_1e84": "#3 Card Header",
"wiz_card_carousel_items_paragraph_e1cc": "<b>Paragraph Title</b><br/><br/>Lorem ipsum dolor",
"wiz_card_carousel_items_header_cc90": "#4 Card Header",
"wiz_card_carousel_items_paragraph_5912": "<b>Paragraph Title</b><br/><br/>Lorem ipsum dolor"
}
}
</i18n>

Attributes

You can change the wiz-card-carousel component appearance and behavior using the following attributes within the <wiz-card-carousel></wiz-card-carousel> tag.

• component-name

Edit the value to change the label displayed on the component Properties tab in eWizard Editor.

<wiz-card-carousel component-name="Carousel"></wiz-card-carousel>

• items

The items array includes the list of cards represented by the {} objects. Each card is an object with properties. To change the properties of each card, edit its attributes.

<wiz-card-carousel
id="wiz-card-carousel-4c34"
class="default"
:items="[
{
'__label':'Card 1',
'isHeaderVisible':true,
'header':$t('wiz_card_carousel_items_header_29d6'),
'headerColor':'#0288d1',
'isImageVisible':true,
'image':'./media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg',
'isParagraphVisible':true,
'paragraph':$t('wiz_card_carousel_items_paragraph_a7b0'),     
'paragraphColor':'#ffffff',
'__id':'7-items-0'
}
]"
></wiz-card-carousel>

The items array includes the card objects with the following attributes:

— __label—required for displaying the card label in eWizard Editor.

— isHeaderVisible—if true, the card header shows on the card.

— header—text of the card header.

— headerColor—color of the card header background.

— isImageVisible—if true, the image shows on the card.

— image—the path to the image.

— isParagraphVisible—if true, the text shows on the card.

— paragraph—the card text.

— paragraphColor—the background color of the card text.

• orientation

To rotate the cards vertically, set the value to vertical. To rotate the cards horizontally, set the value to horizontal.

<wiz-card-carousel orientation="vertical"></wiz-card-carousel>

• direction

To control the card rotation directions, update the property values. Use both to rotate the cards in both directions. You can also rotate the cards clockwise or counterclockwise.

<wiz-card-carousel direction="both"></wiz-card-carousel>

• current-item

To display a specific card of the carousel as the starting one, enter the number of the card. The numbering of the cards starts with 0. For example, in a carousel with three cards, the first card is numbered as 0, the second is 1, and the third is 2.

<wiz-card-carousel :current-item="0"></wiz-card-carousel>

• shift

To control how far the current-item is shifted in the specified direction, enter the value of the angle in degrees. You can enter a positive or a negative number, for example, 90 or -25.

<wiz-card-carousel :shift="35"></wiz-card-carousel>

• sensitivity

To change the rotation speed, enter the speed multiplier. The sensitivity value is multiplied by the amount of pixels you rotate. For example, if you rotate 100px at a time, and your sensitivity is 2, the carousel rotates by 200px.

<wiz-card-carousel :sensitivity="4"></wiz-card-carousel>

• radius

To change the radius of the circle the cards rotate on, enter the number in pixels.

<wiz-card-carousel :radius="50"></wiz-card-carousel>

For example:

— A carousel where the radius is 25:

— A carousel where the radius is 90:

— A carousel where the radius is 360:

• is-snap

To center the card you stop the rotation on, set the value to true.

<wiz-card-carousel :is-snap="true"></wiz-card-carousel>

Properties

The wiz-card-carousel component has the following properties:

Property	Type	Default	Description
`componentName`	String	`Carousel`	The text component label displayed on the Properties tab in eWizard Editor
`orientation`	String	`horizontal`	Controls whether the cards rotate horizontally or vertically
`direction`	String	`both`	Controls the card rotation direction. Rotate the cards `clockwise`, `counterclockwise`, or set `both` to rotate the cards in both directions
`shift`	Number	`0`	The angle that shows how far the `current-item` is shifted in the specified `direction`
`sensitivity`	Number	`0.2`	Controls the rotation speed
`radius`	Number	`360`	The radius of the carousel
`isSnap`	Boolean	`true`	If `true`, eWizard Editor centers the card you stop the rotation on. If `false`, the carousel stops on the same place you leave it
`currentItem`	Number	`0`	Defines what card of the carousel is displayed as the starting one by default
`items`	Array	[…]	Card settings. Includes the properties of each card

Each card in the items array has the following properties:

Property	Type	Default	Description
`__label`	Array	`true`	The card label displayed in eWizard Editor
`isHeaderVisible`	Boolean	`true`	Defines if header is visible
`header`	String	`Header`	Card header text
`headerColor`	String	`#0288d1`	Card header color
`isImageVisible`	Boolean	`true`	Defines if image is visible
`image`	String	`./media/images/image.png`	Card image source
`isParagraphVisible`	Boolean	`true`	Defines if the card text is visible
`paragraph`	String	`<b>Paragraph Title</b>` `<br/><br/>Lorem ipsum dolor sit amet, consectetur` `adipiscing elit. Aenean euismod bibendum laoreet.` `Proin gravida dolor sit amet lacus` `accumsan et viverra justo commodo.`	Card text
`paragraphColor`	String	`#ffffff`	Card text background color