React로 제작된 경량 Slider 구성 요소
경량 React 회전식 구성 요소
Features
데모
시작하기빠른 시작
Install
Use
개발
Props
: 세부 문서와 예제
중요 알림: 먼저 React가 설치되었는지 확인하세요.
Props | Type | 기본값 | Description | 필수 |
---|---|---|---|---|
<code><span style="font-size: 14px;">defaultSliderIndex</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">0</span> |
默认初始滑动开始位置 | No |
<span style="font-size: 14px;">sliderIndex</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">0</span> |
控制滑动的页面 | No |
<span style="font-size: 14px;">delay</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">1800</span> |
延迟的时间 (ms) | No |
<span style="font-size: 14px;">speed</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">500</span> |
延迟的时间 (ms) | No |
<span style="font-size: 14px;">sliderToShow</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">1</span> |
每次展示页面 | No |
<span style="font-size: 14px;">sliderToScroll</span> |
<span style="font-size: 14px;">number</span> |
<span style="font-size: 14px;">1</span> |
每次滚动的页面数量 | No |
<span style="font-size: 14px;">autoPaly</span> |
<span style="font-size: 14px;">bool</span> |
<span style="font-size: 14px;">true</span> |
是否自动开始轮播 | No |
<span style="font-size: 14px;">isDots</span> |
<span style="font-size: 14px;">bool</span> |
<span style="font-size: 14px;">false</span> |
是否需要dots | No |
<span style="font-size: 14px;">dots</span> |
<span style="font-size: 14px;">enum</span> or <span style="font-size: 14px;">func</span>
|
<span style="font-size: 14px;">circle</span> |
dots 的种类,值为circle,gallery,diamond,square,({index,item})=>{ return ReactDom} | No |
<span style="font-size: 14px;">dotStyle</span> |
<span style="font-size: 14px;">object</span> |
<span style="font-size: 14px;">{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer',overflow:'hidden'}</span> defaultSliderIndex |
number |
🎜0🎜 🎜🎜🎜기본 초기 슬라이딩 시작 위치🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜sliderIndex🎜 🎜🎜🎜number🎜 🎜🎜🎜0🎜 🎜🎜🎜슬라이딩 페이지 제어🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜delay🎜 code>🎜🎜<code>🎜number🎜 🎜🎜🎜1800🎜 🎜🎜🎜지연 시간(ms)🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜속도 🎜 🎜🎜🎜number🎜 🎜🎜🎜500🎜 🎜🎜🎜지연 시간(ms)🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜sliderToScroll🎜 🎜🎜🎜number🎜 🎜🎜🎜1🎜 🎜🎜🎜스크롤당 페이지 수🎜🎜🎜🎜No🎜🎜🎜 🎜 🎜🎜autoPaly🎜 🎜🎜🎜bool🎜 🎜🎜🎜true🎜 🎜🎜🎜캐러셀을 자동으로 시작할지 여부🎜🎜🎜🎜No🎜 🎜🎜🎜🎜🎜isDots🎜 🎜🎜🎜bool🎜 🎜🎜🎜false🎜 🎜🎜🎜점은 필수입니다🎜🎜🎜🎜아니요🎜 🎜🎜🎜🎜🎜dots🎜 🎜🎜🎜enum🎜 🎜 또는 🎜🎜func🎜 🎜🎜🎜circle🎜 🎜🎜🎜점의 유형, 값은 원, 갤러리, 다이아몬드, 정사각형, ({index, item}) =>{ return ReactDom}🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜dotStyle🎜 code>🎜🎜<code>🎜object🎜 🎜🎜🎜{listStyle: 'none',display: 'inline-block',margin: '0px 8px',cursor: 'pointer', 오버플로: '숨김'}🎜 🎜🎜🎜점 스타일🎜🎜🎜🎜
|
<code><span style="font-size: 14px;">dotX</span> |
<span style="font-size: 14px;">string</span> or <span style="font-size: 14px;">number</span>
|
<span style="font-size: 14px;">center</span> |
dot的水平位置 ,可以是<span style="font-size: 14px;">right</span> <span style="font-size: 14px;">left</span> <span style="font-size: 14px;">center</span> 这样的字符串 ,也可以是 30 -20, 表示距离左边的像素,负数表示距右边的像素
|
No |
<span style="font-size: 14px;">dotY</span> |
<span style="font-size: 14px;">string</span> or <span style="font-size: 14px;">number</span>
|
<span style="font-size: 14px;">middle</span> |
dot的垂直位置 ,可以是<span style="font-size: 14px;">top</span> <span style="font-size: 14px;">bottom</span> <span style="font-size: 14px;">middle</span> 这样的字符串 ,也可以是 30 -20, 表示距离底部的像素,负数表示距顶部的像素
|
No |
<span style="font-size: 14px;">isArrows</span> |
<span style="font-size: 14px;">bool</span> |
<span style="font-size: 14px;">false</span> |
是否需要箭头 | No |
<span style="font-size: 14px;">arrowRender</span> |
<span style="font-size: 14px;">func</span> |
<span style="font-size: 14px;">null</span> |
箭头的渲染函数 <span style="font-size: 14px;">(type)=>{//type:'backward ' .'forward'}</span>
|
No |
<span style="font-size: 14px;">arrowsY</span> |
<span style="font-size: 14px;">string</span> or <span style="font-size: 14px;">number</span>
|
<span style="font-size: 14px;">middle</span> |
arrows的垂直位置 ,可以是<span style="font-size: 14px;">top</span> <span style="font-size: 14px;">bottom</span> <span style="font-size: 14px;">middle</span> dotX
|
<br>center
🎜right🎜
🎜left🎜
🎜center🎜
🎜와 같은 문자열일 수 있습니다. 또는 30 -20, 왼쪽에서 픽셀을 나타냄, 음수는 오른쪽에서 픽셀을 나타냄 🎜🎜🎜🎜No🎜🎜🎜🎜🎜🎜dotY🎜
🎜🎜🎜string🎜
🎜 또는 🎜🎜number🎜
🎜🎜🎜middle🎜
🎜🎜🎜점의 세로 위치로, 🎜🎜top🎜
일 수 있습니다. code>🎜bottom 🎜 🎜middle🎜
🎜 이러한 문자열은 아래쪽의 픽셀을 나타내는 30 -20일 수도 있고 위쪽의 픽셀을 나타내는 음수🎜🎜🎜🎜일 수도 있습니다. 아니요🎜🎜🎜🎜🎜 🎜isArrows🎜
🎜🎜🎜bool🎜
🎜🎜🎜false🎜
🎜🎜🎜화살표가 필요합니까🎜🎜🎜 🎜No🎜🎜🎜🎜🎜 🎜arrowRender🎜
🎜🎜🎜func🎜
🎜🎜🎜null🎜
🎜🎜🎜화살표 렌더링 기능 🎜🎜(type)= >{//type:'backward ' .'forward'}🎜
🎜🎜🎜No🎜🎜🎜🎜🎜🎜arrowsY🎜
🎜🎜 🎜string🎜
🎜 또는 🎜🎜number🎜
🎜🎜🎜middle🎜
🎜🎜🎜화살표의 수직 위치. 🎜🎜top일 수 있음 🎜
🎜bottom🎜
🎜middle🎜
🎜 이러한 문자열은 아래쪽의 픽셀을 나타내는 30 -20, 아래쪽의 픽셀을 나타내는 음수일 수도 있습니다. 최고🎜🎜🎜🎜안돼🎜🎜🎜 🎜🎜🎜🎜🎜위 내용은 반응 캐러셀 구성요소 React-slider-light에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!