vue使用glide.js实现轮播图(可直接复制使用)

效果图

可以实现自动轮播,3种切换方式:直接滑动图片、点击两侧按钮、点击底部按钮

体验链接:http://website.livequeen.top

实现

一、引入依赖

1、控制台引入依赖

npm install @glidejs/glide

2、在css中引用

css 复制代码
<style scoped>
@import '@glidejs/glide/dist/css/glide.core.min.css';
......
</style>

3、在js代码中引用

javascript 复制代码
import Glide from '@glidejs/glide';

二、页面布局

html 复制代码
<template>
  <body>
    <!-- glide轮播图 -->
    <div class="glide">
      
      <div class="glide__track" data-glide-el="track">
        <!-- 轮播图集合 -->
        <div class="glide__slides">
          <!-- 轮播图item -->
          <div class="glide__slide" v-for="(item, index) in glideList">
            <!-- 中心动态展示文字及按钮 -->
            <div class="slide-caption">
              <h1>{{item.h1}}</h1>
              <h3>{{item.h3}}</h3>
              <button class="explore-btn">探索更多</button>
            </div>
            <!-- 虚化背景 -->
            <div class="backdrop"></div>
            <!-- 图片 -->
            <img :src="item.src" alt="" />
          </div>
        </div>
      </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 class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" :class="{active: nowActive === index}" :data-glide-dir="'=' + index" v-for="(item, index) in glideList"></button>
      </div>
    </div>
  </body>
</template>
css 复制代码
<style scoped>
@import '@glidejs/glide/dist/css/glide.core.min.css';

/* 轮播图样式 */
.glide {
  position: relative;
  z-index: 50;
}

.glide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.glide__slide img {
  width: 100vw;
  max-width:100%;
  height: 100vh;
  object-fit: cover; /* 等比例缩放 */
}

/* 轮播图背景虚化遮罩 */
.backdrop {
  background: rgba(42, 42, 42, 0.69);
  z-index: 60;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.3;
}

.glide__arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  z-index: 40;
}

.glide__arrow {
  width: 40px;
  height: 40px;
  margin: 0px 20px;
  background: rgba(255,255,255,0.3);
  border: 1px white;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.glide__arrow:hover{
  background: rgba(255,255,255,0.5);
}

.glide__arrow:active{
  background: rgba(255,255,255,0.7);
}

.glide__bullets {
  position: absolute;
  bottom: 15px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}

.glide__bullet {
  width: 35px;
  height: 5px;
  margin: 0 5px;

  border: none;
}

.glide__bullet.active {
  background-color: darkorange;
}


/* 这部分是内部其他组件的样式 */
.slide-caption {
  position: absolute;
  z-index: 70;
  color: #e7e9ec;
  text-align: center;
  max-width: 60vw;

  pointer-events: auto;
}

.slide-caption > * {
  opacity: 0;
}

.slide-caption h1 {
  font-size: 54px;
  font-weight: 600;
}

.slide-caption h3 {
  font-size: 24px;
  margin: 48px 0;
}

.explore-btn {
  padding:  14px 32px;
  background-color: #FB6354;
  border: 0;
  border-radius: 4px;
  color: #e7e9ec;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}

</style>

三、glide参数配置

javascript 复制代码
<script>
import Glide from '@glidejs/glide';

import glide1 from '../src/assets/img/glide1.jpg';
import glide2 from '../src/assets/img/glide2.jpg';
import glide3 from '../src/assets/img/glide3.jpg';


export default {
  data() {
    return {
      // vue组件实例对象
      glide: '',
      // 当前glide轮播图序号
      nowActive: 0,
      // glide配置参数
      glideConfig: {
        startAt: 0,         // 一开始显示哪一张幻灯片
        autoplay: 4000,     // 自动播放时间间隔
        hoverpause: false,   // 鼠标停留幻灯片上时,停止自动播放
      },
      // glide-数据列表
      glideList: [
        {
          h1: '科技推动人类进步,研发引领实业发展。',
          h3: '自力更生是中华民族自立于世界民族之林的奋斗基点,自主创新是我们攀登世界科技高峰的必由之路。',
          src: glide1,
          type: 'img'
        },
        {
          h1: '科技推动人类进步,研发引领实业发展。',
          h3: '自力更生是中华民族自立于世界民族之林的奋斗基点,自主创新是我们攀登世界科技高峰的必由之路。',
          src: glide2,
          type: 'img'
        },
        {
          h1: '科技推动人类进步,研发引领实业发展。',
          h3: '自力更生是中华民族自立于世界民族之林的奋斗基点,自主创新是我们攀登世界科技高峰的必由之路。',
          src: glide3,
          type: 'img'
        }
      ]
    };
  },
  mounted () {
    this.init()
  },
  methods: {

    /**
     * 初始化
     */
    init () {
      this.initGlide();
    },

    /**
     * 初始化glide
     */
    initGlide () {
      this.glide = new Glide('.glide', this.glideConfig);

      // 及时更新底部bullet的选中状态
      this.glide.on('move', () => {
        this.nowActive = this.glide.index;
      });

      this.glide.mount();
    }
  }
};
</script>
相关推荐
海底火旺16 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺17 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码17 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
JustHappy20 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
培根芝士42 分钟前
electron-updater实现自动更新
javascript·electron
海天胜景1 小时前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle1 小时前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
樊小肆2 小时前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
一天睡25小时2 小时前
视频HLS分片与关键帧优化深度解析
前端·javascript
Java~~2 小时前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js