@acctglobal/carousel-universal-test

carousel-universal

This component has the functionality to render in the form of a carousel, elements passed by children.

Using

1. import

import Carousel from "Carousel"

2. Declare

 <Carousel>
</Carousel>

3. Passing Items that will be rendered

<Carousel>
    <img src="http://via.placeholder.com/226x416?text=Product1" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product2" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product3" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product4" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product5" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product6" alt='' />
    <img src="http://via.placeholder.com/226x416?text=Product7" alt='' />
</Carousel>

4. Including Mandatory Props

<Carousel bullet={{ isVisible: true }} arrow={{ isVisible: true}}   carouselId="Sample"  >
    ...
</Carousel>

Result

Props

Bullets Button

Parameter	Type	Description
bullet	object	Mandatory. Parameter containing the parameters below
style	object	Optional. Style that will be applied to the Button
bulletEnableColor	string	Optional. Bullet color enabled
bulletDisableColor	string	Optional. Bullet color Disable
isVisible	boolean	Mandatory. Visibility of Bullets Button
numeric	boolean	Optional. Displays a numerical count of items

Arrow Button

Parameter	Type	Description
arrow	object	Mandatory. Parameter containing the parameters below
style	object	Opcional. Estilo que sera aplicado ao Button
iconColor	string	optional. Cor do Icone
isVisible	boolean	Mandatory.Visibility of Arrows Button

General

Parameter	Type	Description
qtyItems	number	Optional.Set the Number of Items displayed on the screen
gapItems	number	Optional. Set the spacing between the items that will be displayed
carouselId	string	Mandatory. Unique Carousel Identifie

Note

When using qtyItems it will not be necessary to use gapItems, because the distance of the elements will be calculated automatically.

Use gapItems when the spacing generated by qtyItems is not satisfactory.