>  기사  >  웹 프론트엔드  >  반응 캐러셀 구성요소 React-slider-light에 대한 자세한 설명

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

小云云
小云云원래의
2018-02-23 11:46:355156검색

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.