carousel-universal

carousel-items

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

Intalação

  yarn add carousel-universal

Using

• import

import Carousel from "carousel-items"

• 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

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	Obrigatório. Visibility of Bullets Button

Arrow Button

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

General

Parameter	Type	Description
qtdItems	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 qtdItems 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 qtdItems is not satisfactory.