<style lang="scss" scoped>
	@import './../../library/styles/common/mixin.scss';
	.carousel-item{
		width:100%;
		height:200px;
		text-align: center;
		line-height: 200px;
		background: #364d79;
		@include lightbgcolor;
		color: #fff;
	}
</style>
## carousel 走马灯

### 引入
```javascript
import { carousel, carouselItem } from '@58fe/p5';
```

### 基本用法

:::demo 

```html
<carousel>
	<carousel-item>
		<div class="carousel-item">1</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">2</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">3</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">4</div>
	</carousel-item>
</carousel>
```

:::


### 控制切换
`isShowArrow` 是否展示左右箭头，默认fasle

`isShowDot` 是否展示下方控制，默认展true
:::demo 

```html
<carousel :is-show-arrow=true>
	<carousel-item>
		<div class="carousel-item">1</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">2</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">3</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">4</div>
	</carousel-item>
</carousel>
```
:::

### 自动播放
`isAutoPlay` 设置自动播放，默认true
:::demo 

```html
<carousel :is-show-arrow=true :is-auto-play=false>
	<carousel-item>
		<div class="carousel-item">1</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">2</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">3</div>
	</carousel-item>
	<carousel-item>
		<div class="carousel-item">4</div>
	</carousel-item>
</carousel>
```
:::

### 参数

| 参数          | 说明                  | 类型          | 可选值  | 默认值  |
| ------------- | --------------------- | ----------- | ------ | ------ |
| changeSpeed   | 自动切换的时间间隔       | Number      | ——     | 1000   |
| speed         | 动画移动速度            | Number      | ——     | 500    |
| isShowArrow   | 是否展示箭头            | Boolean     | ——     | false  |
| isShowDot     | 是否展示下方操作         | Boolean     | ——     | true   |
| isAutoPlay    | 设置自动播放            | Boolean     | ——     | true   |
