@58fe/p5
Version:
pc端vue组件
99 lines (85 loc) • 2.24 kB
Markdown
<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 |