1.0.2 • Published 6 years ago
carousel-plugin v1.0.2
carousel-plugin
一个使用原生 JavaScript 实现的轮播图组件，兼容 pc 和 h5
内容
浏览器兼容性
| IE | Firefox | Chrome | Safari | iOS | Android | |
|---|---|---|---|---|---|---|
| IE9+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
功能特性
- 使用原生 JavaScript
- 兼容 pc 和 h5
- 持续维护迭代
安装
npm install carousel-plugin --saveOR
<script src="./dist/carousel.min.js"></script>
<script>
new Carousel({
container: document.querySelector('.carousel'),
wrap: document.querySelector('.wrap')
});
</script>使用
开发
npm run dev编译案例
npm run build:example编译生产环境
npm run build:prod案例
请查看example
config
| option | description | default | val |
|---|---|---|---|
duration | 切换时长(ms)可选 | 1000 | Number |
stay | 停留时长(ms)可选 | 1000 | Number |
container | 外部容器必选 | null | DOM |
wrap | 轮播容器必选 | null | DOM |
multi | 一屏是否包含多个项目可选 | false | Boolean |
dotsWrap | 底部锚点容器可选 | null | DOM |
leftArrow | 左边切换按钮可选 | null | DOM |
rightArrow | 右边切换按钮可选 | null | DOM |
usePosition | 是否使用定位实现动画过渡可选 | false | Boolean |
enableTouch | 是否允许触摸滑动可选 | true | Boolean |
enableClick | 是否允许点击底部锚点切换可选 | true | Boolean |
dotClassName | 锚点类名可选 | dot | String |
activeClassName | 激活的锚点类名可选 | active | String |
activeClassName | 激活的锚点类名可选 | active | String |
贡献
欢迎给出一些意见和优化，期待你的 Pull Request