Glide.js是一款轻盈灵活的jQuery滑块/转盘插件（ES6 JavaScript滑块/转盘库），可帮助您创建具有快速和高性能CSS3转换的响应式和触摸式滑块。

参见：

• jQuery/JavaScript/CSS中的10个最佳旋转木马插件

特征：

• 重量轻且易于使用
• 模块化和可扩展。
• 支持触摸设备上的滑动事件
• 箭头、项目符号和键盘导航
• 自动播放
• 悬停时暂停
• CSS3通过回退转换到较旧的浏览器
• 支持几乎所有的html元素
• 跨浏览器，支持所有现代网络/移动浏览器

如何使用它:

1.使用NPM安装并下载库。

# NPM
$ npm install @glidejs/glide --save

2.将Glide.js导入到您的项目中。

// Core Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";
// Theme Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";

import Glide from '@glidejs/glide'

3.或者直接加载文档中的JavaScript和CSS文件。

<!-- Local -->
<link rel="stylesheet" href="dist/css/glide.core.min.css">
<link rel="stylesheet" href="dist/css/glide.theme.min.css">
<script src="dist/glide.min.js"></script>

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

4.为幻灯片、分页项目符号和导航箭头创建html。

<div class="glide">
  <!-- Slides here -->
  <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>
  <!-- Navigation -->
  <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>
  <!-- Pagination -->
  <div class="glide__bullets" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1"></button>
    <button class="glide__bullet" data-glide-dir="=2"></button>
  </div>
</div>

5.为滑块创建自定义控件（可选）。

<div data-glide-el="controls">
  <button data-glide-dir="<">Previous</button>
  <button data-glide-dir=">">Next</button>
  <button data-glide-dir="<<">First</button>
  <button data-glide-dir=">>">Last</button>
  <button data-glide-dir="=1">Goto The Slide 2</button>
</div>

6.使用默认设置初始化Glide.js。就是这样。

new Glide('.glide').mount();

7.自定义滑块的可能选项。

new Glide('.glide', {

    // Auto change slides after specifed interval.
    autoplay: 4000,

    // Slider type. 
    // carousel, slider or slideshow.
    type: 'carousel',

    // Start slider at specifed slide number.
    startAt: 1,

    // Pause autoplay on mouseover the slider.
    hoverpause: true,

    // Change slide on left/right keyboard arrow press.
    keyboard: true,

    // The number of slides to show per screen
    perView: 1,

    // 'center' or 1,2,3...
    focusAt: 0,

    // Space between slides
    gap: 10,

    // Stop running perView number of slides from the end
    bound: false,

    // Minimal touch-swipe distance to need to change slide. 
    // False for turning off touch.
    swipeThreshold: 80,

    // Maximum number of slides moved per single swipe or drag
    perTouch: false,

    // Alternate moving distance ratio of swiping and dragging
    touchRatio: .5,

    // Angle required to activate slides moving
    touchAngle: 45,

    // Minimal drag distance to need to change slide. 
    // False for turning off drag.
    dragThreshold: 120,

    // Animation duration in ms.
    animationDuration: 400,

    // Animation easing CSS function.
    animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',

    // Call the resize events at most once per every wait in milliseconds.
    throttle: 16,

    // Enable infinite loop on slider type
    rewind: true,

    // Duration of the rewinding animation
    rewindDuration: 800,

    // 'ltr' or 'rtl'
    direction: 

    // The value of the future viewports which have to be visible in the current view
    // e.g. 100 or { before: 100, after: 50 }
    peek: 0,

    // Options applied at specified media breakpoints
    breakpoints: {},

    // Default CSS classes
    classes: {
      direction: {
        ltr: 'glide--ltr',
        rtl: 'glide--rtl'
      },
      slider: 'glide--slider',
      carousel: 'glide--carousel',
      swipeable: 'glide--swipeable',
      dragging: 'glide--dragging',
      cloneSlide: 'glide__slide--clone',
      activeNav: 'glide__bullet--active',
      activeSlide: 'glide__slide--active',
      disabledArrow: 'glide__arrow--disabled'
    }
    
})

8.属性和API方法。

// the current slide index
glide.index

// get the option value
glide.settings.OptName

// get the slider type
glide.type

// get the slider status
glide.disabled

// enable the slider
glide.mount();

// update the option
glide.update({ options here });

// play the slider
glide.play();

// pause the slider
glide.pause();

// enable the slider
glide.enable();

// disable the slider
glide.disable();

// destroy the slider
glide.destroy();

// go to the next slide
// see more in the controls section
glide.go('>');

// check the slider type
glide.isType('slider');
glide.isType('carousel');

9.事件处理程序。

glide.on('mount.before', function() {
  // befoure mount
})

glide.on('mount.after', function() {
  // after mount
})

glide.on('update', function() {
  // after the settings changed
})

glide.on('play', function() {
  // when playing
})

glide.on('pause', function() {
  // when paused
})

glide.on('build.before', function() {
  // before setting up a slider to its initial state
})

glide.on('build.bafter', function() {
  // after setting up a slider to its initial state
})

glide.on('run.before', function(move) {
  // before running
})

glide.on('run', function(move) {
  // when running
})

glide.on('run.after', function(move) {
  // after running
})

glide.on('run.offset', function(move) {
  // after calculating new index and making a transition
})

glide.on('run.start', function(move) {
  // after calculating the new index, but before making a transition
})

glide.on('run.end', function(move) {
  // after calculating the new index, but before making a transition
})

glide.on('move', function(movement) {
  // on move
})

glide.on('move.after', function(movement) {
  // after moving
})

glide.on('resize', function() {
  // on window resize
})

glide.on('swipe.start', function() {
  // swipe.start
})

glide.on('swipe.move', function() {
  // swipe.move
})

glide.on('swipe.end', function() {
  // swipe.end
})

glide.on('translate.jump', function(movement) {
  // before a translate applies
})

更新日志：

版本3.6.0（2022-09-27）

• 壮举：添加toArray函数将NodeList转换为Array
• 删除不推荐使用的event.keyCode并替换为event.code
• 添加package.json“类型”字段

v3.5.2 (2021-11-29)

• build：不要忽略NPM上的dist/folder，所以它在安装包后就可用了

v3.5.1 (2021-11-23)

• 错误修复

v3.5.0 (2021-11-22)

• 新克隆定量选项

第3.4.0版（2019-09-20）

• 新克隆定量选项

第3.3.0版（2019-08-21）

• 使现代化

2017-01-22

• 修复了锚点和图像中默认事件的问题

2016-08-07

• 只有1个图像时停止滑动

2016-06-05

• [hotfix]调用destroy后调整仍然激发的大小

2016-03-17

• v2.0.7版本

2016-02-05

• 阻止移动设备上的多个滚动方向

2015-12-21

• 固定项目符号的z索引

2015-11-08

• 固定幻灯片不在手机上滑动

2015-11-06

• v2.0.5版本

2015-08-22

• 项目符号实时事件绑定

2015-08-12

• 添加缺少的命名空间以调整大小。

2015-07-29

• 填充选项句柄%，px，数值
• 固定触摸冻结；性能修复

2015-07-22

• v2.0.3版本

2015-07-13

• 滑动选项回调
• 触发器可以处理多个目标
• 填充选项原点

2015-07-07

• 已修复销毁方法。

2015-06-13

• 触摸模块各种修复

2015-06-06

• 防止拖动时单击锚点

2015-06-03

• 触摸模块修复

2015-05-24

• 修复多次绑定的触发器

2015-05-15

• 增加了自动高度选项

2015-05-04

• 修复了一些错误并改进了类型“滑块”

2015-04-30

• 触摸模块修复和优化

2015-04-23

• 2.0版本

2014-11-25

• 单幻灯片错误修复
• 增加了Bower支持

2014-07-12

• 更新至v1.0.65

2014-02-26

• 修复旧浏览器回退

2014-02-21

• 修复了多个滑块和事件处理程序的改进

2014-02-20

• 修复悬停时播放/暂停事件

2014-02-11

• 修复了transition回调后的问题。

2014-02-02

• 代码重构。可读性更强、模块化、标量化。
• 添加圆形幻灯片更改
• 重命名导航选项，确保进行更新。
• 精细动画选项。现在通过插件选项设置。不再需要在css文件中设置转换。
• 新的api方法.reinit（）。重建并重新计算滑块元素的尺寸。

2013-12-11

• 扩展选项和错误修复

2013-12-06

• 小修复：语法、清理

v1.0.4 (2013-11-04)

• 精细滑动事件
• 支持Opera 12。

预览截图

CSS3转换 响应滑块插件 Glide.js