2.6.1 • Published 4 years ago

nw-carousel v2.6.1

Weekly downloads
55
License
-
Repository
-
Last release
4 years ago

carousel

移动端网站首页几乎都会用到的图片轮播组件。 组件使用了 touchstart 和 touchend` 事件,所以仅适用于移动端

用法

直接引入dist 或者 使用 npm install carousel-html5 安装后import:


import Carousel from 'carousel-html5'

var c = new Carousel({
   root: 'component-carousel',
   speed: 300, /* 可选参数,表示滑动速度,默认 300,单位 ms */
   interval: 3000, /* 可选参数,表示定时器间隔,不传则不开启定时器,单位 ms */
   current: 1, /* 当前滑块的位置,默认为0 */
   onSwitch: function (currentIndex) { /* 可选参数,切换回调,返回切换后index */
       console.log(currentIndex)
   } 
})

要求 #root 是以下类似的三级结构:  

<div id="component-carousel">
    <ul><!-- 不要求必须使用ul标签 -->
        <li><img src="xxx"></li><!-- 元素个数 >= 1, 1时不播放,2时自动补足成4个以便于切换 -->
        <li><img src="xxx"></li><!-- 不要求必须使用li标签 -->
        <li><img src="xxx"></li>
        <li><img src="xxx"></li>
        <li><img src="xxx"></li>
    </ul>
</div>

具体可以查看: DEMO

GITHUB: juzhikan/carousel

2.6.1

4 years ago

2.3.2

4 years ago

2.3.1

4 years ago

2.3.0

4 years ago

2.2.3

4 years ago

1.23.2

6 years ago

1.23.1

6 years ago

1.21.9

6 years ago

1.21.8

6 years ago

1.19.2

6 years ago

1.19.1

6 years ago