Glide.js 介绍

Glide.js 是一个轻量级、灵活且可定制的 JavaScript 轮播库。它使用了纯 JavaScript 编写，不依赖任何第三方库，因此在许多项目中都可以轻松集成。Glide.js 提供了许多选项和方法，可以让你轻松地创建和控制轮播。

特点

• 灵活性: Glide.js 提供了许多选项，可以让你定制轮播的外观和行为。
• 响应式: 你可以为不同的屏幕尺寸定义不同的设置。
• 轻量级: Glide.js 的大小非常小，不会对页面加载速度产生太大影响。
• 易用性: Glide.js 的 API 设计得非常直观，即使是初学者也可以快速上手。

使用实例

以下是一个使用 Glide.js 创建轮播的基本示例：

1. 安装 Glide.js

你可以通过 npm 或 yarn 安装 Glide.js：

npm install @glidejs/glide

2. 导入 Glide.js 和相关 CSS

在你的 JavaScript 文件中，导入 Glide.js 和相关的 CSS 文件：

import Glide from '@glidejs/glide';
import '@glidejs/glide/dist/css/glide.core.min.css';

3. 创建 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>

4. 初始化 Glide.js

在你的 JavaScript 文件中，初始化 Glide.js 并设置选项：

new Glide('.glide', {
  type: 'carousel',
  startAt: 0,
  perView: 3 // 同时显示3个滑块
}).mount();

这个示例创建了一个基本的轮播，其中同时显示三个滑块。你可以根据你的需求来调整选项。

根据切换显示不同图片

当glide切换的时候，根据不同的activeIndex显示不同的图片。

<template>
  <div class="glide">
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide" v-for="(item, index) in list" :key="index">
          <div class="itemInfo">
            <div class="itemImg">
              <img :src="index === activeIndex ? item.imgActive : item.img" alt="">
            </div>
            <div class="titleDesc">
              {{ item.title }}
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
        <img src="./assets/icon_left.png" alt="">
      </button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
        <img src="./assets/icon_right.png" alt="">
      </button>
    </div>
  </div>
</template>

<script>
import Glide from '@glidejs/glide';
import '@glidejs/glide/dist/css/glide.core.min.css';
import img1 from './assets/img1.png'
import img1active from './assets/img1active.png'
import img2 from './assets/img2.png'
import img2acitve from './assets/img2acitve.png'
import img3 from './assets/img3.png'
import img3active from './assets/img3active.png'

export default {
  data() {
    return {
      activeIndex: -1,
      list: [{
        title: '岸桥起重机(3)',
        img: img1,
        imgActive: img1active,
      }, {
        title: '场桥起重机(5)',
        img: img2,
        imgActive: img2acitve,
      }, {
        title: '门式起重机(5)',
        img: img3,
        imgActive: img3active,
      },]
    };
  },
  components: {},
  mounted() {
    const glide = new Glide('.glide', {
      type: 'carousel',
      focusAt: 'center',
      perView: 3,
    });

    glide.on('move', () => {
      this.activeIndex = glide.index;
    });

    glide.mount();
  },
  methods: {},
};
</script>

vue3应用

vue3 使用Glide.js实现图片轮播

Glide.js 提供了许多其他选项和方法，可以让你进一步定制轮播。你可以查看 Glide.js 的官方文档以了解更多信息。