/3D-react-carousel

3D responsive and customizable carousel for reactJs

Primary LanguageJavaScript

3D-Carousel-ReactJs

A resposive and customizable carousel for reactJs you can see the preview here

Get Started

npm

npm i t-a-e-3d-carousel-reactjs

information

Parameter Type Default Description
imageList List null List of images url/path and title (optional)
autoplay Boolean false Automatically change image slides
showArrows Boolean true Side arrows display status
interval Integer 2000 If autoplay is enabled, the time period in milliseconds of image slides changing
className String null carousel class name
imageClassName String null carousel images class name
onClick function null on click function
overlayClassName String null carousel image overlay class name
id String null carousel id

parameter usage

<Carousel 
    imageList={List}
    autoplay={Boolean}
    showArrows={Boolean}
    interval={Integer}
    className={String}
    imageClassName={String}
    onClick={function}
    overlayClassName={String}
    id={String}
    >

usage

import Carousel from 't-a-e-3d-carousel-reactjs'

function App () {

    const Images = [
        {
            title: 'title 1',
            url: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Y2Fyc3xlbnwwfHwwfA%3D%3D&auto=format&fit=crop&w=500&q=60'
        },
        {
            title: 'title 2',
            url: 'https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80'
        },
        {
            title: '',
            url: 'https://images.unsplash.com/photo-1517672651691-24622a91b550?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1189&q=80'
        },
        {
            url: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2Fyc3xlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
        },
    ]


 return (
     <Carousel imageList={Images} />
 )   
}

export default App