Slider スライダー
スライダー（カルーセル）コンポーネントは、スライドショーの形式で、ページ上で複数のコンテンツを横方向に表示するコンポーネントです。
使用場面
- スライダーのコンテンツは相互に独立しており、前後とも内容やデータの間に論理的関係が存在しません。
- 単一画像スライダー：このスタイルは通常、運営バナーを表示するために使用され、位置が比較的固定されたモジュールです。
- 複数画像スライダー：単位情報の閲覧用です。
コンポーネント例
コンポーネント属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
animation | スライダー項目のアニメーションタイプを選択します。slide：左右スライド、fade：フェード | 'slide' | 'fade' | 'slide' |
arrowDirection | 矢印の表示方向を制御します | 'hoz' |'ver' | 'hoz' |
arrowPosition | 矢印の位置を制御します | 'inner' | 'outer' | 'inner' |
arrowSize | 矢印のサイズを制御します | 'medium' | 'large' | 'medium' |
arrows | スライダー項目の矢印を有効にするかどうか | boolean | true |
autoplay | スライダー項目の自動再生を選択するかどうか | boolean | false |
autoplaySpeed | スライダー項目の自動再生速度。単位：ms | number | 3000 |
centerMode | 中央モードを有効にするかどうか | boolean | false |
diyContents | カスタムモードのデータを入力するために使用されます。isDiyがtrueに設定されている場合にのみ有効です | any[] | [] |
diyContentsRender | カスタムモードのレンダリング関数を定義するために使用されます。isDiyがtrueに設定されている場合にのみ有効です | (item: any, index: number) => ReactNode | - |
dots | ナビゲーションドットを有効にするかどうか | boolean | true |
dotsDirection | ナビゲーションドットの表示位置 | 'hoz' | 'ver' | 'hoz' |
focusOnSelect | 複数画像スライダー時に、クリック選択後に自動的に中央に移動します | boolean | false |
images | スライダー項目を設定するために使用されます | [] | |
isDiy | カスタムモードを有効にするために使用されます | boolean | false |
lazyLoad | 遅延読み込みモードを有効にするかどうか | boolean | false |
margin | スライダー項目間の間隔を制御するために使用されます | number | 10 |
slideDirection | スライダー方向を制御します | 'hoz' | 'ver' | 'hoz' |
slideImageHeight | スライダー画像の高さ。単位はpxまたは%で設定します | string | '300px' |
slideImageHeightAuto | スライダー項目の高さ自動調整を有効にする（画像の場合はアスペクト比が保持されます） | boolean | false |
slideImageWidth | スライダー項目の幅を設定するために使用されます | string | '100%' |
slidesToScroll | 同時にスライドするスライダー項目の数を制御するために使用されます | number | 1 |
slidesToShow | 同時に表示されるスライダー項目の数を制御するために使用されます。type属性がmultiの場合に有効です | number | 2 |
speed | スライダー速度。単位: ms | number | 500 |
triggerType | ドットナビゲーションのトリガー方式 | 'click' | 'hover' | 'click' |
type | スライダー方式を設定するために使用されます。single：単項スライダー、multi：多項スライダー | 'single' | 'multi' | 'single' |