business-carousel

封装的轮播插件, 用法及其简单, 页面只需一个 div, 不用撰写烦人的 DOM, 插件会自动生成 DOMTree.

源码地址

在线演示

https://codesandbox.io/s/businesscarousel-rmgbo

基本用法

new Carousel({});

可配置项

interface IDataSource {
text: string,
img: {
url: string,
target: string,
},
}

Key

Type

Require

Description

dataSource

IDataSource[]

false

基本数据

afterChange

() => void

false

切换后回调

beforeChange

() => void

false

切换前回调

autoPlay

boolean

false

是否自动切换

showDots

boolean

false

是否显示导航点

showArrows

boolean

false

是否显示箭头

easing

string

false

动画效果

effect

Fade

false

切换效果

delayTime

number

false

自动滚动延迟时间

duringTime

number

false

过渡时间

isHoverPause

boolean

false

鼠标放置是否停止轮播

注意事项

目前只支持 Fade & Scroll 两种状态轮播图, 默认使用scroll

new Carousel({
effect: 'scroll' | 'fade',
});