Nonlinear Programming Methods

    @acctglobal/carousel-universal-test
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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"
    1. Declare
     <Carousel>
    </Carousel>
    1. 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>
    1. 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

    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.

    Keywords

    none

    Install

    npm i @acctglobal/carousel-universal-test

    DownloadsWeekly Downloads

    63

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    83.6 kB

    Total Files

    18

    Last publish

    Collaborators

    • luiz.priolli
    • ricardo.freitas
    • fabioacct