eamon_carousel_component

npm - i eamon_carousel_component

infinity=true

infinity=false

HOW TO USE

If you use defalut button

<Carousel
    width = {960}
    height = {240}
    count = {4}
    duration = '.5s'
    effect = 'linear'
    gap={10}
    unit = 'px'
    defaultButtonStyle = {fontSize: '20px', margin: '15px 0'}
    defaultButtonCoverStyle = {display: 'flex', justifyContent: 'space-around' ,width: '960px'}
    infinity={true}
    >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
<Carousel/>

width : [Num] width of single slide

height : [Num] height of single slide

count : [Num] Number of ViewCards

duration : [Str] duration of transition

effect : [Str] effect of transition

gap : [Num] gap between Cards, gap=CardWarpper_padding*2

unit : [Str] 'px' , 'rem' , 'em' unit of width or height

defaultButtonStyle : [styled-Obj] In component, defaultButton Style , ex) { fontSize: '20px', margin: '15px 0' }

defaultButtonCoverStyle : [styled-Obj] In component, defaultButtonCover Style , ex) { display: 'flex' }

infinity : [boolean] true => infinity carousel , false => when you go end and start the carousel, button is disabled

If you want to use your external button

using useRef

ref

    slideToLeft: Left button OnClick Handler 
    slideToRight: Right button OnClick Handler 
    rightdisable: if you chose infinity={false}, Right button disable state
    leftdisable: if you chose infinity={false}, Left button disable state
    pageNumber: current page number
    totalPage: total page number

const button = useRef();

<RightButton onClick={button.current.slideToRight}></RightButton>
<LeftButton onClick={button.current.slideToLeft}></LeftButton>
<Carousel
    width = {960}
    height = {240}
    count = {4}
    duration = '.5s'
    effect = 'linear'
    gap={10}
    unit = 'px'
    defaultButtonStyle = {fontSize: '20px', margin: '15px 0'}
    defaultButtonCoverStyle = {display: 'flex', justifyContent: 'space-around' ,width: '960px'}
    infinity={true}
    ref={button}
    >
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
<Carousel/>

Default Setting

If you don't give specific value, the default setting will be like this below:

    width = 960,
    height = 240,
    count = 4,
    duration = '.5s',
    effect = 'linear',
    gap=10,
    unit = 'px',
    defaultButtonStyle = {fontSize: '20px', margin: '15px 0'},
    defaultButtonCoverStyle = {display: 'flex', justifyContent: 'space-around' ,width: '960px'},
    infinity=true,
    children = [
      <DefaultDiv>1</DefaultDiv>,
      <DefaultDiv>2</DefaultDiv>,
      <DefaultDiv>3</DefaultDiv>,
      <DefaultDiv>4</DefaultDiv>,
      <DefaultDiv>5</DefaultDiv>,
      <DefaultDiv>6</DefaultDiv>,
      <DefaultDiv>7</DefaultDiv>,
      <DefaultDiv>8</DefaultDiv>,
      <DefaultDiv>9</DefaultDiv>
    ]