react-vanilla-carousel

The slider is designed as a carousel. Responsive. Supports swipes, infinite scrolling and transition to the desired slide. Has pagination and slide counter.

Installation :

npm i react-vanilla-carousel
or
yarn add react-vanilla-carousel

Usage :

Use component "Carousel"

It has 4 required parameters:
Mode - image or jsx mode. Accepts "img" / "jsx".
ContentData - The data that you will be viewing. Must be [] type of

 [{content: data (img / jsx), id: "unique value"}, {content: data (img / jsx), id: "unique value"}]. 

The minimum number of elements in an array is 2.
Paginator - whether you want to see pagination. Accepts a boolean value.
Counter - whether you want to see the counter. Accepts a boolean value.

Examples

const pic = "https://loremflickr.com/320/240"

const ArrayPhoto = [
    {content:pic, id:"135465"},
    {content:pic, id: "23456"},
    {content:pic, id: "36536"},
    {content:pic, id: "42543"},
    {content:pic, id:"56536245"},
]

return (
    <div className={"mainContainer"}>
        <Carousel ContentData={ArrayPhoto} Paginator={true} Counter={true} Mode={"img"}/>
    </div>
)

    const ArrayBlocks = [
        {content:<div style={{background:"red",width:"100%",height:"100%"}}/>, id:"1656"},
        {content: <div style={{background:"green",width:"100%",height:"100%"}}/>, id: "264645"},
        {content: <div style={{background:"yellow",width:"100%",height:"100%"}}/>, id: "33543"},
        {content: <div style={{background:"pink",width:"100%",height:"100%"}}/>, id: "46546"},
        {content: <div style={{background:"blue",width:"100%",height:"100%"}}/>, id:"554656"},
    ]


    return (
        <div className={"mainContainer"}>
            <Carousel ContentData={ArrayBlocks} Paginator={true} Counter={true} Mode={"jsx"}/>
        </div>
    )

Contributing :

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D