# carousel

**Repository Path**: towardly/carousel

## Basic Information

- **Project Name**: carousel
- **Description**: js 轮播组件
- **Primary Language**: TypeScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-10
- **Last Updated**: 2024-06-04

## Categories & Tags

**Categories**: webui

**Tags**: None

## README

# Carousel
使用 `TypeScript` 编写的一款小巧的轮播组件，兼容移动和PC端。
## 安装
```javascript
npm install ph-carousel --save
yarn add ph-carousel
```
## 使用
### 引用
```javascript
// 1. 引入 css 样式表
import 'ph-carousel/index.css';
// 或者
import 'ph-carousel/lib/index.less';

// 2. 引入js文件
import Carousel from 'ph-carousel'
```
### 使用
```javascript
new Carousel({
  el: '.ph-swipe'
})
```
构造函数的对象参数说明：
| 字段 | 类型 | 是否必填 | 默认值 | 说明 |
| - | - | - | - | - |
| `el` | `string` | 是 | - | 容器节点选择器 |
| `speed` | `number` | 否 | 300 | 动画持续时间（毫秒） |
| `defaultIndex` | `number` | 否 | 0 | 初始显示的轮播图的索引 |
| `auto` | `number` | 否 | 3000 | 自动播放的时间间隔（毫秒），如果设置小于等于0，则停止自动播放 |
| `continuous` | `boolean` | 否 | `true` | 是否可以循环滑动 |
| `showIndicators` | `boolean` | 否 | `true` | 是否显示指示器 |
| `indicatorToggle` | `boolean` | 否 | `false` | 点击指示器时，是否进行切换 |
| `noDragWhenSingle` | `boolean` | 否 | `false` | 在只有一页时是否允许滑动 |