轮播图自定义内容
官网:Swiper演示 - Swiper中文网
下载:
npm i swiper
Vue3示例代码:
<template><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><div>111</div><div>222</div></div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div></div><button @click="slideToIndex(1)">点击切换</button>
</template><script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css';export default {data() {return {swiper: null,activeIndex: 0, // 用于存储当前活动的滑动项下标};},mounted() {this.swiper = new Swiper(".mySwiper", {autoplay: {delay: 3000,disableOnInteraction: false,},on: {slideChange: () => {this.activeIndex = this.swiper.activeIndex; // 更新当前活动项下标}}});},methods: {slideToIndex(index) {if (this.swiper) {this.swiper.slideTo(index); // 使用 Swiper 的 slideTo 方法切换到指定下标}},},
};
</script><style scoped>
html,
body {position: relative;height: 100%;
}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;
}.swiper {width: 100%;height: 100%;
}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;
}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;
}
</style>
相关文章:
轮播图自定义内容
官网:Swiper演示 - Swiper中文网 下载: npm i swiper Vue3示例代码: <template><div class"swiper mySwiper"><div class"swiper-wrapper"><div class"swiper-slide"><div>…...
大数据-44 Redis 慢查询日志 监视器 慢查询测试学习
点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…...
Istio_01_Istio初识
文章目录 IstioService Mesh Istio Istio: 以服务网格形态用于服务治理的开放平台和基础设施 本质: 以非侵入式治理服务之间的访问和调用服务治理: 流量管理、可观测性、安全性可同时管理多类基础设施(多种网络方案) 如: Istio和Kubernetes架构的结合 Istio通过Kubernetes的域…...
leetcode日记(47)螺旋矩阵Ⅱ
这题思路不难,就是找规律太难了。 我首先的思路是一行一行来,根据规律填入下一行的数组,第i行是由前i个数字(n-2*i)个增序数列后i个数字组成,后来觉得太难找规律了就换了一种思路。 思路大致是先计算出需…...
centos系统mysql主从复制(一主一从)
文章目录 mysql80主从复制(一主一从)一、环境二、服务器master1操作1.开启二进制日志2. 创建复制用户3. 服务器 slave1操作4. 在主数据库中添加数据 mysql80主从复制(一主一从) 一、环境 准备两台服务器,都进行以下操…...
IEDA怎么把springboot项目 启动多个
利用Idea提供的Edit Configurations配置应用参数。 点击Modify Options进行添加应用参数: 确保这里勾选...
Vue 3项目安装Element-Plus
Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发,那么安装和集成 Element Plus 是一个不错的选择。在本文中,博主将详细介绍如何在 Vue …...
Git下载安装
一、介绍 Git是一个分布式版本控制系统,最初由Linus Torvalds创建,用于管理和跟踪代码的变化。它可以轻松地处理个人项目和大型团队项目的版本控制需求。 Git的主要特点包括: 分布式:每个开发者都可以拥有自己的本地仓库&#x…...
linux中的目录操作函数
参考 【Linux系统编程】Linux 文件系统探究:深入理解 struct dirent、DIR 和 struct stat结构 stat函数 C标准库提供了访问linux的目录的函数接口现对目录的操作。 一、libc接口 libc访问目录的流程为:打开目录,访问目录,关闭目…...
JSON 文件第一段飘红
问题 原因 这个问题通常发生在尝试用 ESLint 去解析 JSON 文件时。ESLint 主要设计用于检查 JavaScript 代码的语法和风格,而JSON是一种数据交换格式,不包含 JavaScript 的逻辑结构,如函数、变量声明等。 解释报错原因 当ESLint遇到它不能识…...
go使用gjson操作json数据
gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库,用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据,无需预先定义 Go 结构体或映射(map)来匹…...
Mac 下华为鸿蒙 :DevEco Studio 开发工具下载
1.登录:华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 ,安装,并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报:淘宝镜像源错误: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…...
C进阶—动态内存管理
这里写目录标题 动态内存分配的原因动态内存函数mallocfreecallocrealloc C/C内存开辟柔性数组柔性数组特点 动态内存分配的原因 常见的内存开辟方式: int a 10;//在栈空间上开辟4个字节 char arr[10] {0};//在栈空间上开辟连续的10个字节上述开辟的空间问题&am…...
QT表格显示MYSQL数据库源码分析(七)
一. 连接MySQL数据库 首先,创建了一个QSqlDatabase对象,并设置数据库类型为"QMYSQL"。然后,它设置了数据库的主机名,端口号,数据库名,用户名和密码。最后,尝试打开数据库连接&#x…...
excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出
一、介绍 在上篇文章中,我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库:easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具,底层逻辑也是基于 apache p…...
探索前后端数据传输模式:Java、Go与Python的实践20240719
深入解析前后端数据传输:Java、Go与Python的实践 引言 在当今的互联网时代,用户对Web应用的性能和交互体验有着越来越高的要求。无论是信息展示型网站还是复杂的企业应用,前后端数据传输的效率和模式选择都至关重要。本文将深入探讨三种主流…...
【YashanDB知识库】yac修改参数后关闭数据库hang住
【标题】yac修改参数后关闭数据库hang住 【问题分类】性能优化 【关键词】YashanDB, yac, shutdown hang 【问题描述】修改yac参数后执行shutdown immediate,数据库hang住。 【问题原因分析】 Shutdown操作时,线程在获取gInstance->trigger->s…...
提升网站性能:ThinkPHP6中如何实现Mysql分页查询
随着互联网的快速发展,web应用程序的开发也越来越复杂。而分页查询是web应用程序中常见的功能之一。thinkphp6是一个web框架,可以帮助开发人员快速开发应用程序。在本文中,我们将讨论如何在thinkphp6中使用mysql进行分页查询。 首先…...
Python:Flask自定义URL路由参数过滤器
目录 简单的例子手动类型转换自动类型转换自定义路由过滤器 简单的例子 先看一个简单的例子,GET请求需要传递一个参数,我们直接获取的是字符串 from flask import Flaskapp Flask(__name__)app.get("/<value>") def index(value):ret…...
闭包与装饰器
一.闭包: 闭包是Python中的一种高级特性,指的是在函数内部定义了另外一个函数,并返回了这个内部函数作为函数对象,同时还保存了外层函数的状态信息。这个内部函数可以依赖外层函数的变量和参数,而且外层函数返回的是这…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
如何在看板中体现优先级变化
在看板中有效体现优先级变化的关键措施包括:采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中,设置任务排序规则尤其重要,因为它让看板视觉上直观地体…...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
MMaDA: Multimodal Large Diffusion Language Models
CODE : https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA,它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用,结合SQLite数据库实现联系人管理功能,并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能,同时可以最小化到系统…...
