js实现轮播图_高性能轻量级零依赖的轮播图组件——Glider.js

介绍

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组件，由于其最大化利用原生能力，因为具备极高的性能，即使是在移动端。