轮播图JS库


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


安装

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

NPM

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

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

直接下载

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

使用 CDN

说明

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 来美化轮播图,这个就看个人发挥了。

标签: Glide, 前端

添加新评论