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

效果图

可以实现自动轮播,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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/37448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.net 项目中配置 Swagger

一、前言 二、Swagger 三、.net 项目中添加Swagger 1、准备工作 &#xff08;1&#xff09;.net项目 &#xff08;2&#xff09;SwaggerController &#xff08;3&#xff09;XML文档注释 2、安装Swagger包 3、 添加配置swagger中间件 &#xff08;1&#xff09;添加S…

uniapp, ‍[⁠TypeError⁠]‍ “Failed to fetch dynamically imported module“ 报错解决思路

文章目录 1. 背景2. 报错3. 解决思路4. 思考参考1. 背景 最近基于uniapp开发一款设备参数调试的APP软件,在使用第三方插件的过程中,出现下面的报错。 2. 报错 [plugin:vite:import-analysis] Cannot find module ‘D:/leaning/uniapp/demo/jk-uts-udp示例/uni_modules/uts-…

对于CDA一级考试该咋准备??!

一、了解考试内容和结构 CDA一级考试主要涉及的内容包括&#xff1a;数据分析概述与职业操守、数据结构、数据库基础与数据模型、数据可视化分析与报表制作、Power BI应用、业务数据分析与报告编写等。 CDA Level Ⅰ 认证考试大纲:https://edu.cda.cn/group/4/thread/174335 …

怎么用JavaScript写爬虫

随着互联网技术的不断发展&#xff0c;爬虫&#xff08;web crawler&#xff09;已经成为当前最热门的爬取信息方式之一。通过爬虫技术&#xff0c;我们可以轻松地获取互联网上的数据&#xff0c;并用于数据分析、挖掘、建模等多个领域。而javascript语言则因其强大的前端开发工…

C++精解【9】

文章目录 大整数GMP概述GMP安装 [cygwin](https://cygwin.com/install.html)安装 gmpexample Eigen基本属性和运算 大整数GMP 概述 GMP GMP是一个用于任意精度算术的免费库&#xff0c;可对有符号整数、有理数和浮点数进行操作。除了运行GMP的机器的可用内存所暗示的精度外&…

expandtabs()方法——tab符号转为空格

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 expandtabs()方法把字符串中的tab&#xff08;\t&#xff09;符号转为空格&#xff0c;tab&#xff08;\t&#xff09;符号默认的空格数是…

简单科普-GPT到底是什么?

1.ChatGPT ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;是OpenAI研发的一款聊天机器人程序 &#xff0c;于2022年11月30日发布 。ChatGPT是人工智能技术驱动的自然语言处理工具&#xff0c;它能够基于在预训练阶段所见…

MATLAB2024a下的神经网络聚类工具箱聚类

1 打开神经网络聚类工具箱GUI界面 图1-1 2 导入训练数据 图2-1 导入训练集如图2-2&#xff0c;图2-3、图2-4所示 图2-2 图2-3 图2-4 如图2-4&#xff0c;确认无误点击确定 3 模型训练 如图3-1&#xff0c;调整验证集与测试集比例及映射大小后点击”训练“&#xff0c;开始训练…

Oracle、MySQL、PostgreSQL对比

在对比 Oracle、MySQL 和 PostgreSQL 关于 range/list 分区键更新操作时&#xff0c; Oracle: 默认情况下不允许对分区键进行更新操作&#xff0c;否则会报错 ORA-14402: updating partition key column would cause partition to change 。可以通过设置 ALTER TABLE table_nam…

uview文本框组件计数count报错u--textarea

报错内容&#xff1a; [Vue warn]: Error in render: “TypeError: Cannot read property ‘length’ of null” found in —> at uni_modules/uview-ui/components/u-textarea/u-textarea.vue at uni_modules/uview-ui/components/u–textarea/u–textarea.vue mp.runtime.…

如何理解泛型的编译期检查

既然说类型变量会在编译的时候擦除掉&#xff0c;那为什么我们往 ArrayList 创建的对象中添加整数会报错呢&#xff1f;不是说泛型变量String会在编译的时候变为Object类型吗&#xff1f;为什么不能存别的类型呢&#xff1f;既然类型擦除了&#xff0c;如何保证我们只能使用泛型…

浪潮信息AIStation与毕昇:让AI大模型开发变得更易用

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度改变着世界。近日&#xff0c;毕昇大模型应用开发平台和浪潮信息AIStation智能业务生产创新平台完成兼容性互认证。二者的融合&#xff0c;不仅简化了大模型定制开发的流程&#xff…

python--列表list切分(超详细)

在Python中&#xff0c;列表&#xff08;list&#xff09;的切分&#xff08;slicing&#xff09;是一种非常有用的操作&#xff0c;它允许你获取列表的一部分而不是整个列表。切分的基本语法如下&#xff1a; list[start:stop:step] start&#xff1a;切分的起始索引&#x…

【进阶篇-Day6:JAVA中Arrays工具类、排序算法、正则表达式的介绍】

目录 1、Arrays工具类2、排序算法2.1 冒泡排序2.2 选择排序2.3 二分查找&#xff08;折半查找&#xff09;&#xff08;1&#xff09;概念&#xff1a;&#xff08;2&#xff09;步骤&#xff1a; 3、正则表达式3.1 正则表达式的概念&#xff1a;3.2 正则表达式的格式&#xff…

Unidbg调用-补环境V3-Hook

结合IDA和unidbg,可以在so的执行过程进行Hook,这样可以让我们了解并分析具体的执行步骤。 应用场景:基于unidbg调试执行步骤 或 还原算法(以Hookzz为例)。 1.大姨妈 1.1 0x1DA0 public void hook1() {

【项目日记(二)】搜索引擎-索引制作

❣博主主页: 33的博客❣ ▶️文章专栏分类:项目日记◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多项目内容 目录 1.前言2.索引结构2.1创捷索引2.2根据索引查询2.3新增文档2.4内存索引保存到磁盘2.5把…

android/res/raw/xxx.txt 手动添加翻译

android/res/values 下的strings.xml可以添加翻译 如果字符串写在android/res/raw&#xff0c;按如下&#xff0c;手动翻译&#xff0c; 代码片段 String info "";InputStream stream null;try {// 翻译android/res/raw/newtork_privacy_policy.txt 20240619 begi…

U-Net for text-to-image

1. Unet for text-to-image 笔记来源&#xff1a; 1.hkproj/pytorch-stable-diffusion 2.understanding u-net a comprehensive tutorial 3.Deep Dive into Self-Attention by Hand 4.Towards Understanding Cross and Self-Attention in Stable Diffusion for Text-Guided Im…

java大型医院绩效考核系统源码(医院为什么需要绩效机制?)医院绩效考核系统源码 医院管理绩效考核系统源码

java大型医院绩效考核系统源码&#xff08;医院为什么需要绩效机制&#xff1f;&#xff09;医院绩效考核系统源码 医院管理绩效考核系统源码 医院作为提供医疗服务的核心机构&#xff0c;其运营和管理效率直接影响到患者的就医体验、治疗效果以及医院的长期发展。因此&#xf…

Github 2024-06-29 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-29统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10Move项目1Rust编程语言的可靠异步运行时:Tokio 创建周期:2759 天开发语言:Rust协议类型:MIT LicenseStar数量:24319 个Fork数量…