@acctglobal/carousel-universal-test NPM

carousel-universal

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

Using

import

import Carousel from "Carousel"

Declare

 <Carousel>
</Carousel>

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>

Including Mandatory Props

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

Result

App Screenshot

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