eamon_carousel_component v0.1.5

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>
    ]