carousel-plugin

一个使用原生 JavaScript 实现的轮播图组件，兼容 pc 和 h5

内容

• 浏览器兼容性
• 功能特性
• 安装
• 使用
• 案例
• config
• 贡献

浏览器兼容性

| IE | Firefox | Chrome | Safari | iOS | Android | |:---------:|:---------:|:---------:|:---------:|:---------:|:---------:| | IE9+ | ✓| ✓ | ✓ | ✓ | ✓ | ✓

功能特性

• [x] 使用原生 JavaScript
• [x] 兼容 pc 和 h5
• [x] 持续维护迭代

安装

npm install carousel-plugin --save

OR

<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

pc oline demo

mobile oline demo

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