介绍

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'
  }
});

基本使用

<link rel="stylesheet" type="text/css" href="glider.css">
<script src="glider.js"></script>

• 最基本的

<div class="any-class">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

• 带分页

<div class="glider-contain">
  <div class="glider">
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
    <div>your content here</div>
  </div>

  <button aria-label="Previous" class="glider-prev">?</button>
  <button aria-label="Next" class="glider-next">?</button>
  <div role="tablist" class="dots"></div>
</div>

window.addEventListener('load', function(){
  new Glider(document.querySelector('.glider'), {
    setting-name: setting-value
  })
})

总结

Glider.js是一个优秀的JavaScript组件，由于其最大化利用原生能力，因为具备极高的性能，即使是在移动端。