@acctglobal/carousel-universal

Carousel Universal

• To add the component in your project, just use npm or yarn as follows

 yarn add @acctglobal/carousel-universal

 yarn add @acctglobal/carousel-universal

How to use

• To use compontes follows the steps.

Import

 import Carousel from '@acctglobal/carousel-universal

Declaration component

<div>
 <Carousel>
 </Carousel>
</div>

observation: As the divs that are in the carousel are not random, this usage avoids bugs in the calculation that defines the elements that will be rendered from it.

1. Adding Components in to Carousel

<div>
 <Carousel>
    <img src="https://via.placeholder.com/200x400.png?text=01"></img>
    <img src="https://via.placeholder.com/200x400.png?text=02"></img>
    <img src="https://via.placeholder.com/200x400.png?text=03"></img>
    <img src="https://via.placeholder.com/200x400.png?text=04"></img>
    <img src="https://via.placeholder.com/200x400.png?text=05"></img>
    <img src="https://via.placeholder.com/200x400.png?text=06"></img>
    <img src="https://via.placeholder.com/200x400.png?text=07"></img>
    <img src="https://via.placeholder.com/200x400.png?text=08"></img>
    <img src="https://via.placeholder.com/200x400.png?text=09"></img>
    <img src="https://via.placeholder.com/200x400.png?text=10"></img>
 </Carousel>
</div>

1. Result

Props

arrow | Object

The arrow prop is responsible to style and visibility of lateral navigation buttons

Parameter	Type	Description
isVisible	Boolean	Arrows is visible. Optional
iconColor	String	Arrow icon color. Optional
style	Object	Style for arrow button. Optional

Use

 <Carousel arrow={{isVisible:true,iconColor:"#ffff",style:{backgroundColor:"#005fd7"}}} >
    <img src="https://via.placeholder.com/200x400.png?text=01"></img>
    <img src="https://via.placeholder.com/200x400.png?text=02"></img>
    <img src="https://via.placeholder.com/200x400.png?text=03"></img>
    <img src="https://via.placeholder.com/200x400.png?text=04"></img>
    <img src="https://via.placeholder.com/200x400.png?text=05"></img>
    <img src="https://via.placeholder.com/200x400.png?text=06"></img>
    <img src="https://via.placeholder.com/200x400.png?text=07"></img>
    <img src="https://via.placeholder.com/200x400.png?text=08"></img>
    <img src="https://via.placeholder.com/200x400.png?text=09"></img>
    <img src="https://via.placeholder.com/200x400.png?text=10"></img>
  </Carousel>

Result

bullet | Object

The bullet prop is responsible to style and visibility of bottom navigation buttons

Parameter	Type	Description
isVisible	Boolean	Arrows is visible. Optional
bulletDisableColor	String	Bullet disable color. Optional
bulletEnableColor	String	Bullet enable color. Optional
style	Object	Style for bullets button. Optional

Use

<Carousel  bullet={{isVisible:true,bulletDisableColor:"#202124", 
 bulletEnableColor:"#005fd7",style:{marginRight:"20px"}}}
>
    <img src="https://via.placeholder.com/200x400.png?text=01"></img>
    <img src="https://via.placeholder.com/200x400.png?text=02"></img>
    <img src="https://via.placeholder.com/200x400.png?text=03"></img>
    <img src="https://via.placeholder.com/200x400.png?text=04"></img>
    <img src="https://via.placeholder.com/200x400.png?text=05"></img>
    <img src="https://via.placeholder.com/200x400.png?text=06"></img>
    <img src="https://via.placeholder.com/200x400.png?text=07"></img>
    <img src="https://via.placeholder.com/200x400.png?text=08"></img>
    <img src="https://via.placeholder.com/200x400.png?text=09"></img>
    <img src="https://via.placeholder.com/200x400.png?text=10"></img>
  </Carousel>

Result

General props

Parameter	Type	Description
gapItems	Number	Define spacing entry the elements. Optional
qtyItems	Number	Define the quantity of elements show in the screen. Optional