carousel-widget

1.0.3 • Public • Published

Carousel Widget

Carousel Widget for Mobile 是一个专为移动设备定制的 Carousel 组件,不依赖于任何第三方类库,其功能类似 Bootstrap 的 Carousel 组件,但在此之上增加了 touch 功能,可以使用手指触碰移动设备屏幕,实现滑动切换效果。

DEMO

例子参见:http://maxzhang.github.io/dev/carousel-widget/examples/carousel.html

API Documentation

Configs

String : targetSelector 目标元素选取器,items 默认为 targetSelector 的子元素,可以设置itemSelector,查找指定items子元素

String : itemSelector 子元素选取器

String : prevSelector 向前按钮选取器

String : nextSelector 向后按钮选取器

String : indicatorSelector 指示器选取器

String : indicatorCls 当前activeIndex指示器样式

Number/String : width 组件宽度,默认'auto'

Number : activeIndex 初始显示的元素index,默认0

Boolean : autoPlay true自动切换,默认true

Number : interval 循环滚动间隔时间,单位ms,默认3000

Number : duration 动画持续时间,单位ms,默认400

iScroll : iscroll 关联一个iScroll对象,Carousel Widget 为水平方向滚动,如果被嵌套在一个垂直滚动的 iScroll 组件中,会导致触摸滚动 Carousel的水平滚动 与 iScroll的垂直滚动相冲突。为了解决这个问题,在水平滑动时,禁用iScroll的垂直滚动,水平滑动结束之后,再启用iScroll。

Function : beforeSlide 开始切换之前回调函数,返回值为false时,终止本次slide操作

Function : onSlide 切换完成回调函数

Methods

prev() 向前滚动一个

next() 向后滚动一个

to( [Number]toIndex, [Boolean]silent) 滚动到指定index,silent为true时切换无动画效果

setWidth( [Number]width ) 设置组件宽度

start() 开始自动切换

stop() 停止自动滚动

destroy() 销毁组件

Readme

Keywords

none

Package Sidebar

Install

npm i carousel-widget

Weekly Downloads

15

Version

1.0.3

License

MIT

Last publish

Collaborators

  • zhangdaiping