Glide.js 轻量级响应式幻灯片插件

Question

Glide.js 是一个无依赖的 JavaScript ES6 滑块和旋转木马插件，它轻巧，灵活，响应快速。

特点

• 无依赖。包括一切准备行动。
• 轻量级的。只有~23 kb(~7kb gzip)所有功能都准备好了。
• 模块化。删除未使用的模块并更多地删除脚本权重。
• 可扩展。插入您自己的模块，并提供额外的功能。
• 打包机准备好了。用卷车还是用 webpack？我们支持你。

开始

最新版本的NPM.

npm install @glidejs/glide

提供 <link> 到所需的核心样式表。您还可以选择添加包含的主题样式表..。

<!-- Required Core stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<!-- Optional Theme stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

然后准备一些必要的标记

<div class="glide">
  <div data-glide-el="track" class="glide__track">
    <ul class="glide__slides">
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
    </ul>
  </div>
</div>

最后初始化并挂载一个幻灯片。

import Glide from '@glidejs/glide'
new Glide('.glide').mount()

需要几个选定的模块？只导入和挂载所需的内容。

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'
new Glide('.glide').mount({ Controls, Breakpoints })

浏览器兼容

• IE 11+
• Edge
• Chrome 10+
• Firefox 10+
• Opera 15+
• Safari 5.1+
• Safari iOS 9+

相关链接

• Github 地址：https://github.com/glidejs/glide
• 官网：https://glidejs.com/