Glide.js 开源项目教程

Glide.js 开源项目教程

glide项目地址:https://gitcode.com/gh_mirrors/glidej/Glide.js

1. 项目的目录结构及介绍

Glide.js 项目的目录结构如下：

Glide.js/
├── dist/
│   ├── glide.core.css
│   ├── glide.theme.css
│   ├── glide.core.js
│   └── glide.esm.js
├── src/
│   ├── css/
│   │   ├── _core.scss
│   │   ├── _theme.scss
│   │   └── _variables.scss
│   ├── js/
│   │   ├── index.js
│   │   ├── core/
│   │   ├── css/
│   │   ├── manage/
│   │   ├── run/
│   │   └── utils/
│   └── index.html
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• dist/：包含编译后的 CSS 和 JavaScript 文件，可以直接用于生产环境。
  • glide.core.css：核心样式文件。
  • glide.theme.css：主题样式文件。
  • glide.core.js：核心 JavaScript 文件。
  • glide.esm.js：ES6 模块版本的 JavaScript 文件。
• src/：源代码目录。
  • css/：包含 SCSS 文件，用于生成 CSS 文件。
    • _core.scss：核心样式 SCSS 文件。
    • _theme.scss：主题样式 SCSS 文件。
    • _variables.scss：变量定义 SCSS 文件。
  • js/：JavaScript 源代码目录。
    • index.js：入口文件。
    • core/：核心模块目录。
    • css/：CSS 模块目录。
    • manage/：管理模块目录。
    • run/：运行模块目录。
    • utils/：工具模块目录。
  • index.html：示例 HTML 文件。
• package.json：项目依赖和脚本配置文件。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/js/index.js。这个文件是 Glide.js 的入口文件，负责初始化和配置 Glide 实例。

import Glide from '@glidejs/glide'

new Glide('.glide', {
  type: 'carousel',
  perView: 3,
  gap: 10
}).mount()

启动文件介绍

• import Glide from '@glidejs/glide'：导入 Glide 模块。
• new Glide('.glide', { ... })：创建一个新的 Glide 实例，并传入配置选项。
• .mount()：挂载 Glide 实例，使其生效。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json 和 webpack.config.js。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "glide.js",
  "version": "2.4.2",
  "description": "A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more",
  "main": "dist/glide.core.js",
  "module": "dist/glide.esm.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development --watch"
  },
  "dependencies": {
    "@glidejs/glide": "^2.4.2"
  },
  "devDependencies": {
    "css-loader": "^3.4.2",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

glide项目地址:https://gitcode.com/gh_mirrors/glidej/Glide.js