반응 캐러셀 구성요소 React-slider-light에 대한 자세한 설명

이 글은 주로 React Carousel 컴포넌트인 React-Slider-Light에 대한 자세한 설명을 공유합니다.

react-slider-light

React로 제작된 경량 Slider 구성 요소
경량 React 회전식 구성 요소

---

목차

• Features

• 데모

• 시작하기빠른 시작

• Install

• Use

• 개발

• Props

Features

• : 세부 문서와 예제

support custom : 페이지 브레이크 및 화살표와 같은 화살표 스타일 배치와 같은 스타일을 변경할 수 있습니다.

중요 알림: 먼저 React가 설치되었는지 확인하세요.

Props

<td>string<span style="font-size: 14px;"></span> 또는 </td> <code>number

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!