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.