【亲测免费】 Glide.js 教程：安装与使用指南

2026-01-17 09:33:00作者：姚月梅Lane

1. 项目目录结构及介绍

Glide.js 是一个轻量级、无依赖的 JavaScript 滑块库，适用于创建响应式的轮播组件。以下是它的基本项目目录结构：

.glide/
│
├── dist/             # 包含编译后的 JavaScript 和 CSS 文件
│   ├── glide.js      # 主 JS 文件
│   └── glide.css     # 样式文件
├── src/               # 源码目录
│   └── ...
├── examples/          # 示例代码
│   └── ...
├── package.json       # 项目包管理文件
└── README.md          # 项目说明文件

dist/：发布目录，包含了可以直接在项目中使用的 JS 和 CSS 文件。
src/：源代码目录，存放核心组件的源码。
examples/：演示目录，提供了一些实际应用场景的例子。
package.json：定义项目依赖和其他元数据。
README.md：项目的基本信息和使用指南。

2. 项目的启动文件介绍

Glide.js 的主要JavaScript文件是 dist/glide.js（或者其压缩版本 glide.min.js）。在你的HTML文件中，你需要引入这个文件，然后初始化滑块。以下是如何引入并启动Glide.js的一个简单示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Glide.js 演示</title>
    <!-- 引入 Glide.js CSS -->
    <link rel="stylesheet" href="path/to/glide.css">
</head>
<body>

<div class="glide">
    <div class="glide__track" data-glide-el="track">
        <div class="glide__slides">
            <!-- 添加你的滑动项 -->
        </div>
    </div>
    <!-- 可选：控制按钮，如箭头或dots -->
    <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left">←</button>
        <button class="glide__arrow glide__arrow--right">→</button>
    </div>
    <div class="glide__dots" data-glide-el="controls[nav]"></div>
</div>

<!-- 引入 Glide.js JS -->
<script src="path/to/glide.js"></script>
<!-- 初始化滑块 -->
<script>
    var glide = new Glide('.glide').mount();
</script>
</body>
</html>

请注意替换 path/to/glide.css 和 path/to/glide.js 为实际的文件路径。

3. 项目的配置文件介绍

虽然Glide.js不需要特定的配置文件，但它可以通过 JavaScript API 进行配置。在上面的例子中，Glide.js 初始化时没有传入任何参数，这意味着使用的是默认配置。不过，你可以根据需要自定义配置，例如改变滑动方向或添加键盘导航等。以下是配置的例子：

var glide = new Glide('.glide', {
    type: 'carousel', // 设置滑动类型为轮播
    perView: 3,       // 每次显示三个元素
    arrows: true,     // 启用左右箭头
    keyboard: true    // 启用键盘导航
}).mount();