UNPKG

@58fe/p5

Version:

pc端vue组件

99 lines (85 loc) 2.24 kB
<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 |