Glide.js 轻量级响应式幻灯片插件 - 文章教程

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

发布于 2020-04-27 字数 2371 浏览 2744 评论 0

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

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

特点

  • 无依赖。包括一切准备行动。
  • 轻量级的。只有~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+

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3