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

时间：2024-07-08 20:45:07

效果图

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

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

实现

一、引入依赖

1、控制台引入依赖

npm install @glidejs/glide 

2、在css中引用

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

 3、在js代码中引用

import Glide from '@glidejs/glide';

二、页面布局

<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>
<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参数配置

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

相关文章