wiz-carousel | Viseven Help Center

Implements the set of containers which user can rotate around vertical or horizontal axis.

Usage

To use a carousel, install the wiz-carousel component:

wiz install @edetailer/wiz-carousel

After the installation, import it to the slide and fill it with any HTML tags:

<wiz-carousel>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</wiz-carousel>

These items will be wrapped in <div class="carousel-item"></div> element.

Property	Type	Default	Description
`orientation`	(String)	`horizontal`	Defines carousel type. vertical or horizontal
`direction`	(String)	`both`	Sets carousel rotation type, Set `both` to allow rotation in all directions. Set `clockwise` or `counterclockwise` to allow rotation only in one direction.
`sensitivity`	(Number)	`0.2`	Rotation speed multiplier
`radius`	(Number)	`360`	Carousel rotation radius
`perspective`	(Number)	`800`	Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective
`perspectiveOrign`	(Number)	`90`	Determines the position at which the viewer is looking
`isSnap`	(Boolean)	`true`	Defines that rotation is snapped to show the current item
`shift`	(Number)	`0`	Initial rotation shift angle in the range from `0` degrees to `360`
`currentItem`	(Number)	`0`	Defines index of currently active item
`opacity`	(Number)	`100`	Carousel opacity in percent
`blur`	(Number)	`0`	Carousel blur in pixels
`scale`	(Number)	`1`	Carousel items scale