可视化数据大屏 开发过程中，需要一个卡片轮播的效果，一开始是想使用swiper的，但是这个swiper可能是版本太多了，兼容问题也多了，各种出错，所以就想找一个简单点的能实现效果就行的插件。于是找到了Glide.js

效果截图

演示地址

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

动态效果

使用 Glide.js 来创建一个图片轮播，同时显示三个图片，并添加左右切换按钮。以下是如何实现这一目标的示例代码：

1. 安装 Glide.js

首先，你需要安装 Glide.js。在项目根目录下运行以下命令：

npm install @glidejs/glide

2. 在组件中导入 Glide.js

在你的组件文件中，导入 Glide.js 和相关的 CSS 文件，并设置 Glide 的配置。

<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">
            <img src="./assets/img.png" alt="">
            <p>{{ item.name }}</p>
            <p class="infox1">台账信息</p>
            <div class="nums">
              <span>{{ item.value }}</span>
            </div>
            <p class="infox1">台账信息</p>
            <div class="nums">
              <span>{{ item.value1 }}</span>
            </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 {safetyLedger} from "../../../api/api/LargeScreenData.js";
import numcard from "../../../components/numcard/numcard.vue";

export default {
  data() {
    return {
      list: []
    };
  },
  components: {
    numcard,
  },
  mounted() {
    this.getData()

  },
  methods: {
    async getData() {
      var that = this;
      try {
        const res = await safetyLedger();
        this.list = res.data
        this.$nextTick(() => {
          new Glide('.glide', {
            type: 'carousel',
            perView: 3, // 同时显示3个滑块
          }).mount();
        })
      } catch (err) {
        console.error(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 你可以在这里添加自定义样式 */
.glide {
  position: relative;
  width: 100%;
  height: calc(100% - 20px);
  margin-top: 10px;

  .glide__track {
    position: relative;
    width: calc(100% - 60px);
    margin: auto;
    height: 100%;

    .glide__slides {
      position: relative;
      width: 100%;
      height: 100%;
    }
  }
}

.itemInfo {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(5, 16, 34, 0.1);
  border: 1px solid #4A91F7;
  box-shadow: inset 0 0 10px #4A91F7; /* 内部发光效果 */
  img {
    width: calc(100% - 10px);
    margin: auto;
    margin-left: 5px;
    margin-top: 5px;
  }

  p {
    font-size: 14px;
    font-family: PingFang;
    font-weight: bold;
    color: #FFFFFF;
    margin-left: 10px;
    width: calc(100% - 20px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  p.infox1 {
    font-size: 14px;
    font-family: PingFang;
    font-weight: 500;
    color: #C1D7E6;
    margin-left: 10px;
    width: calc(100% - 20px);
  }
}

.nums {
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  width: calc(100% - 10px);
  margin: auto;
  margin-left: 10px;
  span{
    font-size: 14px;
    font-family: DIN;
    font-weight: 600;
    font-style: oblique;
    color: #FFFFFF;
  }
}


.glide__arrows {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  pointer-events: none;

  .glide__arrow {
    pointer-events: initial;
    background: none;
    border: none;
    cursor: pointer;
  }
}
</style>

这个示例使用了 Glide.js 来创建一个轮播，其中同时显示三个图片，并添加了左右切换按钮。

源码下载

项目基于vue2+webpack+js开发 nodejs 16，购买代码请确保有相关开发基础