Skip to content

codingZero/sea-carousel-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SeaCarousel

如果按照文档步骤有问题,或者看不懂,那就看demo的代码吧!!!因为文档我瞎写的

在线演示地址

Install

npm install sea-carousel --save

Import

// main.js
import SeaCarousel from "sea-carousel"
import "sea-carousel/lib/sea-carousel.css"
Vue.use(SeaCarousel)

Use

<sea-carousel column="3" spacing="15" arrow="always">
    /*** 自定义左右翻页箭头,否则为默认,很丑的哦 ***/
    <span slot="left"><i class="el-icon-arrow-left"></i></span>
    <span slot="right"><i class="el-icon-arrow-right"></i></span>
    /*** 要展示的内容需要用SeaCarouselItem组件包裹 ***/
    <sea-carousel-item v-for="(item, index) in dataList" :key="index">
      // 要展示的内容
    </sea-carousel-item>
</sea-carousel>

SeaCarousel Attributes

参数 说明 类型 可选值 默认值
column 列数 Number -- 2
spacing 列间距 Number -- 16
arrow 箭头显示方式 String always/hover hover

SeaCarousel Methods

方法名 说明 参数
resize 容器宽度改变时调用 --
turnPage 翻页 -1-上一页,1-下一页

SeaCarousel Slot

name 说明
default 只能是SeaCarouselItem
left 上一页
right 下一页

SeaCarouselItem Slot

name 说明
default 要展示的内容

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published