介绍
Glider.js是一个依赖原生js的轮播图组件库,因为其压缩后仅仅2.8k大小,其拥有着很好的性能,Glider.js在Github上开源,目前已拥有2.4kstars。
Github
https://github.com/NickPiscitelli/Glider.js
特性
- 非常小巧(<2.8kb gzip压缩!)
- 非常快速(初始化时间低至25ms!)
- Vanilla JS-没有依赖关系
- 本机浏览器滚动(动量滚动!)
- 完全响应(基于断点的设置)
- 自定义的箭头和点导航
- 完整的键盘可访问性+ ARIA标签
- 鼠标拖动支持!
- Flexbox支持(默认情况下启用)
- 容易扩展
演示
- 多项支持
new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});
- 单个项目
new Glider(document.querySelector('.glider'), { slidesToShow: 1, dots: '#dots', draggable: true, arrows: { prev: '.glider-prev', next: '.glider-next' }});
- 透视图
new Glider(document.querySelector('.glider'), { slidesToShow: 5, slidesToScroll: 1, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});
- 响应设置/滚动锁定支持
new Glider(document.querySelector('.glider'), { // 移动优先默认值 slidesToShow: 1, slidesToScroll: 1, scrollLock: true, dots: '#resp-dots', arrows: { prev: '.glider-prev', next: '.glider-next' }, responsive: [ { // 屏幕大于>= 775px breakpoint: 775, settings: { slidesToShow: 'auto', slidesToScroll: 'auto', itemWidth: 150, duration: 0.25 } },{ // 屏幕大于 >= 1024px breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, itemWidth: 150, duration: 0.25 } } ]});
- 小数幻灯片
new Glider(document.querySelector('.glider'), { slidesToScroll: 1, slidesToShow: 5.5, draggable: true, dots: '.dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});
- 添加删除项
new Glider(document.querySelector('.glider'), { slidesToShow: 3, dots: '#dots', arrows: { prev: '.glider-prev', next: '.glider-next' }});
基本使用
- 最基本的
- 带分页
your content here
your content here
your content here
your content here
« »
window.addEventListener('load', function(){ new Glider(document.querySelector('.glider'), { setting-name: setting-value })})
总结
Glider.js是一个优秀的JavaScript组件,由于其最大化利用原生能力,因为具备极高的性能,即使是在移动端。