Glider.js–高性能轻量级零依赖的轮播图组件

Vedu • 2020-11-13 13:28 • 资源分享 • 阅读 1675

介绍

Glider.js是一个依赖原生js的轮播图组件库，因为其压缩后仅仅2.8k大小，其拥有着很好的性能，Glider.js在Github上开源，目前已拥有2.4kstars。

Github

https://github.com/NickPiscitelli/Glider.js

特性

非常小巧（
非常快速（初始化时间低至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>

最基本的

class=“any-class”> <div>div> <div>div> <div>div> <div>div> div>

带分页

class=“glider-contain”> <div class=“glider”> <div>your content herediv> <div>your content herediv> <div>your content herediv> <div>your content herediv> 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组件，由于其最大化利用原生能力，因为具备极高的性能，即使是在移动端。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/14325.html

Glider.js–高性能轻量级零依赖的轮播图组件

介绍

Github

特性

演示

基本使用

总结

相关推荐

发表评论