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