Glide.js 入门教程：轻量级响应式轮播插件

Glide.js 是一款现代化、无依赖 的 JavaScript 幻灯插件，体积轻巧，性能优秀，特别适合希望构建响应式、简洁轮播效果的开发者。

主要特点

• ⚡ 极致轻量（仅约 23KB）
• 📱 响应式设计
• ⛓️ 无需 jQuery 或其他库
• 🎯 支持模块化 & API 灵活

快速开始

通过 CDN 引入 Glide：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/css/glide.core.min.css" />
<script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.min.js"></script>

HTML 结构

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide"><img src="img1.jpg" alt="Slide 1"></li>
      <li class="glide__slide"><img src="img2.jpg" alt="Slide 2"></li>
      <li class="glide__slide"><img src="img3.jpg" alt="Slide 3"></li>
    </ul>
  </div>
</div>

初始化 JavaScript

<script>
new Glide('.glide', {
  type: 'carousel',
  autoplay: 3000,
  hoverpause: true,
  perView: 1
}).mount();
</script>

常见配置

• type：轮播类型，可选 carousel、slider
• autoplay：自动播放间隔（毫秒）
• perView：每页显示几张幻灯片
• gap：幻灯片间距（px）

优缺点比较

适用场景

Glide.js 特别适合以下场景：

• 🔹 不想引入 jQuery 的现代项目
• 🔹 对体积有严格要求的移动端项目
• 🔹 简洁、基础轮播需求

结语

Glide.js 是一个值得尝试的现代轮播解决方案，如果你偏爱原生 JavaScript、对极致性能有需求，它绝对是理想之选。

官方网站：https://glidejs.com/