首页 > 其他分享 >vue3下el-carousel的card模式下设置item之间的间距

vue3下el-carousel的card模式下设置item之间的间距

时间:2024-11-23 11:55:22浏览次数:10  
标签:el setCarouselItemStyle const currentId value item currentPrevCent carousel

<el-carousel ref="refCarousel" class="wh100Per" :autoplay="false" :loop="true" type="card" arrow="never"
indicator-position="none" @change="priceChange">
<el-carousel-item v-for="(item,index) in list" :key="index" :id="item.id">

</el-carousel-item>
</el-carousel>

const list = ref([]);
const nowIndex = ref(0)
const refCarousel = ref()

const priceChange = (current: number, prev: number) => {
  nowIndex.value = current
setPY()
}
const setPY = () => {
let currentId = nowIndex.value;
const currentPrevCent = '-11%';
const currentCent = '0%';
const currentNextCent = '11%';
if (currentId === 0) {
setCarouselItemStyle(list.value.length - 1, currentPrevCent);
setCarouselItemStyle(0, currentCent);
setCarouselItemStyle(1, currentNextCent);
} else if (currentId === list.value.length - 1) {
setCarouselItemStyle(currentId - 1, currentPrevCent);
setCarouselItemStyle(currentId, currentCent);
setCarouselItemStyle(0, currentNextCent);
} else {
setCarouselItemStyle(currentId - 1, currentPrevCent);
setCarouselItemStyle(currentId, currentCent);
setCarouselItemStyle(currentId + 1, currentNextCent);
}
}
/**
* 设置轮播图子项样式
* @param itemId 子项id
* @param leftValue 左边距
*/
const setCarouselItemStyle = (itemId: number, leftValue: string) => {
const item = refCarousel.value?.$el.querySelector(`[id="${itemId}"]`) as HTMLElement;
if (item) {
item.style.left = leftValue;
}
}

标签:el,setCarouselItemStyle,const,currentId,value,item,currentPrevCent,carousel
From: https://www.cnblogs.com/jiangbeixiaoqiao/p/18564281

相关文章

  • 使用眼精星票证识别系统将行驶证转为结构化Excel教程
    在现代办公环境中,高效处理各类文件和数据至关重要。对于行驶证等证件信息的提取和整理,眼精星票证识别系统提供了一个快速、准确的解决方案。以下是如何使用该系统将行驶证信息转化为结构化Excel文件的详细操作步骤。一、下载安装眼精星票证识别系统来百度APP畅享高清图片......
  • 理解UART 子系统:Linux Kernel 4.9.88 中的核心结构体与设计详解
    往期内容本专栏往期内容:Uart子系统UART串口硬件介绍深入理解TTY体系:设备节点与驱动程序框架详解Linux串口应用编程:从UART到GPS模块及字符设备驱动interrupt子系统专栏:专栏地址:interrupt子系统Linux链式与层级中断控制器讲解:原理与驱动开发–末片,有专栏内容观看顺序......
  • python selenium 操作唯品会
    fromseleniumimportwebdriverimporttimefromselenium.webdriver.chrome.serviceimportServicefromselenium.webdriver.common.byimportByservice=Service(executable_path="D:\\chromedriver.exe")chrome_options=webdriver.ChromeOptions()......
  • 038_Thinkphp/Laravel校园Flea Market校内购物商城售货平台
    目录具体实现截图技术栈和环境说明框架介绍开发技术介绍代码流程执行分析PHP核心代码部分展示其他项目推荐详细视频演示源码获取具体实现截图技术栈和环境说明开发语言:php后端框架:Thinkphp/Laravel前端框架:vue.js服务器:apache数据库:mysql运行环境:phpst......
  • 037_Thinkphp/Laravel在线租房房屋租赁管理系统
    目录具体实现截图技术栈和环境说明框架介绍开发技术介绍代码流程执行分析PHP核心代码部分展示其他项目推荐详细视频演示源码获取具体实现截图技术栈和环境说明开发语言:php后端框架:Thinkphp/Laravel前端框架:vue.js服务器:apache数据库:mysql运行环境:phpstud......
  • 高校智慧平台SExcelExpErr存在SQL注入漏洞
    0x01阅读须知        本文章仅供参考,此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考。本文章仅用于信息安全防御技术分享,因用于其他用途而产生不良后果,作者不承担任何法律责任,请严格遵循中华人民共和国相关法律法规,禁......
  • redis高级篇之IO多路复用select方法简介 第174节答疑
    1、bitmap最大1024位,一个进程最多只能处理1024个客户端2、&rset不可重用,每次socket有数据就相应的位会被置位3、文件描述符数组拷贝到了内核态(只不过无系统调用切换上下文的开销。(内核层可优化为异步事件通知)),仍然有开销。select调用需要传入fd数组,需要拷贝一份到内核,高......
  • 点跟踪论文—RAFT: Recurrent All-Pairs Field Transforms for Optical Flow-递归的全
    点目标跟踪论文—RAFT:RecurrentAll-PairsFieldTransformsforOpticalFlow-递归的全对场光流变换读论文RAFT密集光流跟踪的笔记RAFT是一种新的光流深度网络结构,由于需要基于点去做目标的跟踪,因此也是阅读了像素级别跟踪的一篇ECCV2020的经典论文——RAFT,递归的......
  • 三周精通FastAPI:14 表单数据和表单模型Form Models
     官网文档:表单数据-FastAPI表单数据¶接收的不是JSON,而是表单字段时,要使用 Form表单。fromfastapiimportFastAPI,Formapp=FastAPI()@app.post("/login/")asyncdeflogin(username:str=Form(),password:str=Form()):return{"username":user......
  • [QT基础系列]标签QLabel
    标签QLabelQLabel是Qt中的标签类,通常用于显示提示性的文本,也可以显示图像文本可以获取和设置按钮上显示的文本//获取和设置显示的文本QStringtext()const;voidsetText(constQString&text);对齐方式用于设置标签中的内容在水平和垂直两个方向上的对齐方式......