el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果

<template><el-carousel class="image-swiper" :height="'100%'" :indicator-position="swiperItems.length <= 1 ? 'none' : ''":arrow="swiperItems.length <= 1 ? 'never' : ''"><el-carousel-item v-for="(a, $i) in swiperItems" :key="$i"><el-image style="width: 100%; height: 100%" :src="a.sm" :preview-src-list="swiperItems.map(v => v.lg)" :initial-index="$i":fit="'cover'"></el-image></el-carousel-item></el-carousel>
</template><script>
export default {data() {return {swiperItems: [{sm: "static/img/sm/1.jpg",lg: "static/img/lg/1.jpg",},{sm: "static/img/sm/2.jpg",lg: "static/img/lg/2.jpg",},{sm: "static/img/sm/3.jpg",lg: "static/img/lg/3.jpg",},],};},
};
</script><style lang="scss" scoped>
.image-swiper {position: absolute;width: 400px;height: 300px;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;
}
</style>

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

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

相关文章

websocket前端的连接与接收数据

什么是websocket 1, WebSocket是一种用于在客户端和服务器之间进行全双工通信的网络协议。它使得在单个TCP连接上可以进行双向通信&#xff0c;允许服务器主动地发送数据给客户端&#xff0c;同时客户端也可以向服务器发送数据。与传统的HTTP请求-响应模型不同&#xff0c;Web…

Scrapy框架--settings配置 (详解)

目录 settings配置 官网-参考配置 配置文档 Scrapy默认BASE设置 settings配置 Scrapy框架中的配置文件&#xff08;settings.py&#xff09;是用来管理爬虫行为和功能的关键部分。它是一个Python模块&#xff0c;提供了各种配置选项&#xff0c;可以自定义和控制爬虫的行为。…

【IMX6ULL驱动开发学习】12.Linux驱动之设备树

承接上一篇博客 【IMX6ULL驱动开发学习】11.驱动设计之面向对象_分层思想&#xff08;学习设备树过渡部分&#xff09; 代码获取&#xff1a;https://gitee.com/chenshao777/imx6-ull_-drivers 我后面将三个层合并了&#xff08;实际上只有前两层&#xff09;&#xff0c;合并…

[论文阅读] (31)李沐老师视频学习——4.研究的艺术·理由、论据和担保

《娜璋带你读论文》系列主要是督促自己阅读优秀论文及听取学术讲座&#xff0c;并分享给大家&#xff0c;希望您喜欢。由于作者的英文水平和学术能力不高&#xff0c;需要不断提升&#xff0c;所以还请大家批评指正&#xff0c;非常欢迎大家给我留言评论&#xff0c;学术路上期…

Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

1. bug重现 由于项目不便展示&#xff0c;因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 2. 调试 源码调试时发现下拉菜单是直接放在body 元素里&#xff0c;这时候希望它不要直接放在body里&#xff0c; 查阅文档看到这两个属性&#x…

软件工程期末报告(登录注册部分)

云小智微校园工具系统的设计与实现成员1注册模块 目录 云小智微校园工具系统的设计与实现成员1注册模块 第一章 绪论 第二章需求分析&#xff1a; 1.活动图&#xff1a; 2.用例图&#xff1a; 什么用户参与了业务模块&#xff1a; 这类用户在模块中使用什么功能学生用户…

【分布式技术专题】「缓存解决方案」一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战(数据更新场景策略和方案分析)

一文带领你好好认识一下企业级别的缓存技术解决方案的运作原理和开发实战&#xff08;数据更新场景策略和方案分析&#xff09; 数据更新场景Cache Aside Pattern策略思想具体操作分析失效&#xff08;Invalidation&#xff09;命中&#xff08;Cache Hit&#xff09;更新&…

【python】python编程基础

基础工具包 python 原生数据结构元组 Tuple列表 list集合 set字典 dictionary NumPy 数据结构数组 Ndarray矩阵 Matrix Pandas 数据结构序列 Series &#xff08;一维&#xff09;数据框 DataFrame &#xff08;二维&#xff09; Matplotlib 数据可视化绘制饼图绘制折线图绘制直…

git学习使用技巧

目录 关于版本控制 本地版本控制系统 集中化的版本控制系统 分布式版本控制系统 Git 是什么 直接记录快照&#xff0c;而非差异比较 近乎所有操作都是本地执行 Git 保证完整性 Git 一般只添加数据 三种状态 起步 - 初次运行 Git 前的配置 初次运行 Git 前的配置 用户…

软件测试流程扫盲:V/W/H模型,测试左移测试右移

一、软件测试模型 &#xff08;一&#xff09;V模型 V模型是瀑布模型的一种改进V模型标明了测试过程中的不同阶段 1.V模型每个测试阶段的测试内容 单元测试&#xff1a;类、函数 集成测试&#xff1a;接口 系统测试&#xff1a;前期测功能有没有满足需求&#xff0c;后期满…

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库

介绍 Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库&#xff0c;基于 ECMA-376&#xff0c;ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Microsoft Excel™ 2007 及以上版本创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&a…

Meta为打造元宇宙不惜下血本:VR开发者年薪高达百万美元

7 月 2 日消息&#xff0c;尽管 2023 年被 Meta 称为“效率年”&#xff0c;但事实证明 Meta 正在以高得离谱的薪水吸引 VR 人才。据《华盛顿邮报》报道&#xff0c;该公司为了吸引优秀的 VR 开发者&#xff0c;提供了高达百万美元的年薪&#xff0c;远超市场水平。 报道援引知…