Glidejs介绍

简介

Glidejs 是一个功能齐全的 JavaScript 库，用于创建漂亮，响应性强的滑块和幻灯片。它拥有流畅的动画效果和多种配置选项，非常适用于构建滑块、轮播图、画廊等应用。

特点

• 简单易用，代码精简
• 支持垂直和水平方向
• 可拖动、可点击，支持鼠标滚轮、键盘控制
• 支持响应式，适应不同的屏幕尺寸
• 支持自定义动画效果，内置丰富的动画类型
• 可控制滑块的速度、滑动距离、缓动效果等
• 可访问性佳，支持屏幕阅读器
• 可扩展，可通过 API、回调函数等进行自定义

使用方法

安装

使用 CDN，或者通过 npm 安装：

npm install @glidejs/glide

引入

在 HTML 文件中引入 GlideJS 库和 CSS 文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide@^3.4.1/dist/css/glide.core.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide@^3.4.1"></script>

HTML 结构

在 HTML 文件中创建幻灯片的基本结构：

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">Slide 1</li>
      <li class="glide__slide">Slide 2</li>
      <li class="glide__slide">Slide 3</li>
    </ul>
  </div>
  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
  </div>
</div>

注意每个元素的 class 和 data-glide-el 属性。

JavaScript 代码

在 JavaScript 文件中初始化幻灯片：

new Glide('.glide', {
  type: 'carousel',
  perView: 3,
  focusAt: 'center',
  autoplay: 4000,
  breakpoints: {
    1200: {
      perView: 2
    },
    768: {
      perView: 1
    }
  }
}).mount();

这里设置了一些选项，包括每屏显示的幻灯片数量、自动播放、响应式断点等。

效果演示

文档

GlideJS 提供了详细的 API 文档和示例，可以在官方网站查看。

• 文档：https://glidejs.com/docs/
• 示例：https://glidejs.com/#examples

兼容性

GlideJS 支持主流的现代浏览器，包括 Chrome、Firefox、Edge、Safari 等。IE11 也可以使用，但需要在 CSS 中添加一些兼容性代码。