# 仿照优酷轮播组件

**Repository Path**: xiaoguoyao/youku

## Basic Information

- **Project Name**: 仿照优酷轮播组件
- **Description**: 仿照优酷轮播组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-15
- **Last Updated**: 2022-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 模仿优酷小轮播图组件

### 📦 Install

```bash
npm i image-scroll-youku
```

#### 🙂 Use

```jsx
import ImagescrollYK from 'image-scroll-youku'

<ImagescrollYK imgList = [] / >

```

``参数说明``

|  字段   | 说明  |  必填   | 默认值  |类型  |
|  ----  | ----  |  ----  | ----  |  ----  |
| onClick  | 点击图片事件 |否 |- |function |
| clickLeft  | 点击左边的icon事件 |否 |- |function |
| clickRight  | 点击右边的icon事件 |否 |- |function |
| imgList  | 图片列表数据 |是 |- | array|
| number  | 滚动区域可见的图片个数 |否 | 4 | number|
| width  | 整个组件宽度 |否 | 800 | number|
| imageHeight  | 图片高度 |否 | 200 | number|
| space  | 图片间隔宽度 |否 | 1% | number 或者 string|
| showText  | 展示描述文字 |否 | true | boole|
| className  | 样式 |否 |- |object |
| style  | 样式 |否 |- | object|


``imgList 的数据格式``

    imgList = [
        {
            imgUrl: 'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称', 
            desc: '简短描述文字'
        },
        {
            imgUrl: 'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称',
            desc: '简短描述文字简短描述文字简短描述文字简短描述文字'
        },
     
        {
            imgUrl: 'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称', 
            desc: '简短描述文字'
        },
        {
            imgUrl: 'https://images.pexels.com/photos/373543/pexels-photo-373543.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称',
            desc: '简短描述文字'
        },
        {
            imgUrl: 'https://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称', 
            desc: '简短描述文字'
        },
        {
            imgUrl: 'https://images.pexels.com/photos/1148820/pexels-photo-1148820.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
            name: '图片名称', 
            desc: '简短描述文字'
        },
    ]

``todo``


|  表头   | 说明  |  必填   | 默认值  |类型  |
|  ----  | ----  |  ----  | ----  |  ----  |
| rightReactNode  | 自定义右侧点击按钮节点 |否 |- | ReactNode|
| leftReactNode  | 自定义左侧点击按钮节点 |否 |- | ReactNode|