この記事では主にreact carouselコンポーネントreact-slider-lightの詳細な説明を共有します。お役に立てれば幸いです。

react-slider-light

react で構築された軽量の Slider コンポーネント

特徴

使用するのはeasy
：詳細なドキュメントと例React がインストールされています重要な注意事項: まず React がインストールされていることを確認してください

小道具

<td>string<span style="font-size: 14px;"></span> または </td>
<code>

小道具	タイプ	デフォルト値	説明	必須
`<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🎜`🎜🎜`🎜番号🎜`🎜🎜`🎜0🎜`🎜🎜🎜スライドページを制御します🎜🎜🎜🎜いいえ🎜🎜🎜🎜🎜`🎜遅延🎜 code>🎜🎜<code>🎜番号🎜`🎜🎜`🎜1800🎜`🎜🎜🎜遅延時間(ミリ秒)🎜🎜🎜🎜いいえ🎜🎜🎜🎜🎜`🎜速度🎜` 🎜🎜`🎜番号🎜`🎜🎜`🎜500🎜`🎜🎜🎜遅延時間(ms)🎜🎜🎜🎜No🎜🎜🎜🎜🎜 `code>🎜sliderToScroll🎜`🎜🎜`🎜number🎜`🎜🎜`🎜1🎜`🎜🎜🎜スクロールごとのページ数🎜🎜🎜🎜いいえ🎜🎜🎜 🎜 🎜`🎜autoPaly🎜`🎜🎜`🎜bool🎜`🎜🎜`🎜true🎜`🎜🎜🎜カルーセルを自動的に開始するかどうか🎜🎜🎜🎜いいえ🎜 🎜🎜🎜🎜`🎜isDots🎜`🎜🎜`🎜bool🎜`🎜🎜`🎜false🎜`🎜🎜🎜ドットは必須です🎜🎜🎜🎜いいえ🎜 🎜🎜🎜🎜`🎜dots🎜`🎜🎜`🎜enum🎜`🎜 または 🎜`🎜func🎜`🎜🎜`🎜circle🎜`🎜🎜🎜ドットの種類、値はcircle、gallery、diamond、square、({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