轮播图JS库

前端轮播图有很多种实现方式，可以使用原生 CSS 和 JS，当然也可以使用现成的组件，Glide 就是一个好用的轮播图组件。

安装

有很多方式可以安装 Glide，下面介绍其中三种。

NPM

官方推荐这种方式，因为它可以保证使用了Webpack和Rollup等打包方式的 JS 包不出问题。

# 安装最新稳定版本
$ npm install @glidejs/glide

直接下载

也可以直接在 Github 上下载最新发布版本。（传送门）

使用 CDN

• https://cdn.jsdelivr.net/npm/@glidejs/glide
• https://unpkg.com/@glidejs/glide

说明

Glide.js有两种版本，完整版和简化版。简化版不包括非必要的组件。

配置

样式

Glide.js 的样式分为两个文件：

• glide.core：核心样式，是 Glide.js 起作用的必要组件。
• glide.theme：提供视觉美化，是可选择组件。

glide.core是必须包含进项目的，glide.theme可以不必包含，可以自定义样式

使用<link>标签

<!-- 必要的核心css -->
<link
  rel="stylesheet"
  hret="node_modules/@glidejs/glide/dist/css/glide.core.min.css"
/>

<!-- 可选的css -->
<link
  rel="stylesheet"
  href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css"
/>

使用 SASs

（如果用得到的话）

/* 必要的核心css */
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";

/* 可选的css */
@import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";

主体结构

不要忘记加data-glide-el="track"属性！

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

控制按钮

创建控制按钮需要涉及到两个数据属性：

• data-glide-el="controls"：包括所有控制组件。
• data-glide-dir="{pattern}"：控制轮播图的切换。

<div data-glide-el="controls">
  <button data-glide-dir="<<">start</button>
  <button data-glide-dir=">>">end</button>
</div>

注意：data-glide-dir需要有特定的值。

值	解释
>	向前翻一页
<	向后翻一页
={i}	前往从 0 开始的第 i 页（e.g."=1"，会前往第二页）
>>	前往最后一页
<<	前往第一页

翻页箭头

使用上述的控制组件，来实现箭头导航就很容易了。

<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
      <
    </button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
      >
    </button>
  </div>
</div>

底部小圆点导航

小圆点导航的实现方式类似，但需要使用 data-glide-el="controls[nav]" 属性。

<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <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>

注意别忘记data-glide-dir属性中的 "=" 等于号。

初始化

使用<script>标签

例如：

<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>

<script>
  new Glide(".glide").mount();
</script>

使用 ES Modules

import Glide from "@glidejs/glide";

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

进阶操作

Glide 插件在初始化时可以传参，以对 Glide 进行调整。
例如：

new Glide(".glide", {
type: "carousel",
startAt: 0,
perView: 3
});

传参索引如下 👇

Type

• slider：第一个的左边无元素，最后一个的右边无元素。
• carousel：第一个的左边是最后一个元素。

默认值：'slider'
类型：String

startAt

从第几章轮播图片开始播放。

默认值：0
类型：Number

perView

视窗中一次能看到几张轮播图片。

默认值：0
类型：Number

focusAt

• 'center'：选中的图片会聚焦在中心。
• 1,2,3...：选中的图片会聚焦在从 0 开始的第 i 个位置。（以 1 为例，当前选中的图片会聚焦在第二个位置。）

默认值：0
类型：Number|String

gap

两张图片之间的间距。

默认值：10
类型：Number
单位：px

autoplay

是否自动播放。（不自动播放为false；自动播放则设置自动播放时间。）

默认值：false
类型：Number|Boolean
单位：ms

hoverpause

鼠标悬停时暂停播放。

默认值：true
类型：Boolean

keyboard

是否允许键盘左右键控制轮播图播放。

默认值：true
类型：Boolean

bound

⚠️ 注意：只有当 type 设置为slider并且 focusAt 没有设置为center，该设置才会起作用。

开启后，视窗范围内不会出现空缺，所有位置都会被轮播单页占满。

默认值：false
类型：Boolean

swipeThreshold

【移动端】 切换轮播图片所需的最小划动距离。false表示不允许划动切换轮播图。

默认值：80
类型：Number|Boolean
单位：px

dragThreshold

切换轮播图片所需要的最小拖动距离。false表示不允许拖动切换轮播图。

默认值：120
类型：Number|Boolean
单位：px

perTouch

每次划动或拖动最多能切换几张轮播图。false表示不限制。

默认值：false
类型：Number|Boolean

touchRatio

轮播图实际移动距离和拖动或划动距离之比。

默认值：0.5
类型：Number

touchAngle

拖动或划动方向与水平方向所允许呈的最大角度。

默认值：45
类型：Number

animationDuration

轮播切换动画用时。

默认值：400
类型：Number
单位：ms

rewind

⚠️ 注意：仅当 type 设置为slider时起作用。

当在第一个和最后一个之间切换时，是否遍历所有的轮播图片。

默认值：true
类型：Boolean

rewindDuration

设置 rewind 动画的持续时间。

默认值：800
类型：Number
单位：ms

animationTimingFunc

类似于 CSS 中 animation 的动画效果。

• linear：线性，平稳过渡。
• ease：快速匀速过渡。
• ease-in：离开上一个较慢，进入下一个较快。
• ease-out：离开上一个较快，进入下一个较慢。
• ease-in-out：离开和进入较快，中间较慢。
• bounce：带回弹效果。

默认值：'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
类型：String

direction

• 'ltr'：从左到右排列。
• 'rtl'：从右到左排列。

默认值：ltr
类型:String

peek

视窗两边可以额外看到之前和之后的轮播图片数量。可以是数字，也可以是字典类型。

默认值：0
类型：Number|Object
单位：px

'breakpoints'

Glide 提供了响应式的配置。

{
  800: {
    perView: 2
  }
}

以上代码表示，在屏幕宽度小于800px时，视窗中只显示两个轮播图片。

默认值：{}
类型：Object

这样就可以使用 Glide 组件来轻松实现轮播图效果啦，可以通过自定义 CSS 来美化轮播图，这个就看个人发挥了。