anima-carousel

2.1.0 • Public • Published

Carousel


Carousel又叫Slider,是经典的移动端幻灯切换组件。本组件支持自动播放、循环等。

快速调用说明

It is very easy to use this module.

HTML:

<div class="carousel carousel-big">
    <div class="carousel-big-outer">
        <ul class="carousel-big-wrap">
            <li><a href="http://m.taobao.com"><img src="http://gtms04.alicdn.com/tps/i4/T1QVNSFMXaXXaZVCTS-300-100.png" width="300" height="100" alt="1" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms01.alicdn.com/tps/i1/T1bFNSFNxaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="2" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms02.alicdn.com/tps/i2/T141tRFRXaXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="3" /></a></li>
            <li><a href="http://m.taobao.com"><img class="lazyimg" dataimg="http://gtms03.alicdn.com/tps/i3/T1SnVNFFRcXXaZVCTS-300-100.png" src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" width="300" height="100" alt="4" /></a></li>
        </ul>
    </div>
    <div class="carousel-status"></div>
</div>

JavaScript:

        carousel = new Carousel({
            element: '.carousel',
            trigger : '.carousel-status',
            hasTrigger: true,
            play : true,
            interval: 1000,
            loop : true
        });        

配置说明

参数释义

element element

  • 页面 dom 节点,只读。

wrap string

  • 滑动显示区域,默认为container的第一个子元素。(该元素固定宽高overflow为hidden,否则无法滑动)

panel string

  • 面板元素,默认为wrap的第一个子元素

trigger string

  • 触发元素,也可理解为状态元素

activeTriggerCls string

  • 触发元素内子元素的激活样式,默认'sel'

hasTrigger Boolean

  • 是否需要触发事件,例tab页签就需要click触发,默认false

steps Number

  • 每次滑动的距离,默认0

left Number

  • panel初始的x坐标,默认0

visible Number

  • 每次滑动几个panels,默认1

margin Number

  • 面板元素内子元素间的间距,默认0

curIndex Number

  • 初始化在哪个panels上,默认0为第一个

duration Number

  • 动画持续时间,默认300ms

loop Boolean

  • 动画循环,默认false

play Boolean

  • 动画自动播放,默认false

interval Number

  • 播放间隔时间,默认5000ms,play为true时才有效

useTransform Boolean

  • 以translate方式动画,支持3d默认true,不支持默认false

lazy String

  • 图片延时加载属性,默认'.lazyimg'

lazyIndex Number

  • 默认加载到第几屏,默认1

callback Function

  • 动画结束后触发

prev String

  • 上一个元素

next Function

  • 下一个元素

activePnCls String

  • prev和next在头尾时的样式,默认'none'

HTML结构

<div class="carousel"><!--容器层,container-->
    <div class="carousel-outer"><!--滑动显示区域,wrap-->
        <ul class="carousel-wrap"><!--面板元素,也就是做动画的元素,panel-->
            <li></li>   <!-- 一系列子元素,就是数据内容 -->
            <li></li>
            ...
        </ul>
    </div>
</div>

实例API

instance.XXX()

  • 说明

Readme

Keywords

none

Package Sidebar

Install

npm i anima-carousel

Weekly Downloads

1

Version

2.1.0

License

MIT

Last publish

Collaborators

  • jaredleechn
  • smbey0nd
  • yuanfei.gyf