当前位置: 首页 > news >正文

轮播图自定义内容

官网: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>

相关文章:

轮播图自定义内容

官网&#xff1a;Swiper演示 - Swiper中文网 下载&#xff1a; npm i swiper Vue3示例代码&#xff1a; <template><div class"swiper mySwiper"><div class"swiper-wrapper"><div class"swiper-slide"><div>…...

大数据-44 Redis 慢查询日志 监视器 慢查询测试学习

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

Istio_01_Istio初识

文章目录 IstioService Mesh Istio Istio: 以服务网格形态用于服务治理的开放平台和基础设施 本质: 以非侵入式治理服务之间的访问和调用服务治理: 流量管理、可观测性、安全性可同时管理多类基础设施(多种网络方案) 如: Istio和Kubernetes架构的结合 Istio通过Kubernetes的域…...

leetcode日记(47)螺旋矩阵Ⅱ

这题思路不难&#xff0c;就是找规律太难了。 我首先的思路是一行一行来&#xff0c;根据规律填入下一行的数组&#xff0c;第i行是由前i个数字&#xff08;n-2*i&#xff09;个增序数列后i个数字组成&#xff0c;后来觉得太难找规律了就换了一种思路。 思路大致是先计算出需…...

centos系统mysql主从复制(一主一从)

文章目录 mysql80主从复制&#xff08;一主一从&#xff09;一、环境二、服务器master1操作1.开启二进制日志2. 创建复制用户3. 服务器 slave1操作4. 在主数据库中添加数据 mysql80主从复制&#xff08;一主一从&#xff09; 一、环境 准备两台服务器&#xff0c;都进行以下操…...

IEDA怎么把springboot项目 启动多个

利用Idea提供的Edit Configurations配置应用参数。 点击Modify Options进行添加应用参数&#xff1a; 确保这里勾选...

Vue 3项目安装Element-Plus

Element Plus 是一个基于 Vue 3 的现代前端UI框架&#xff0c;它旨在提升开发体验&#xff0c;并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发&#xff0c;那么安装和集成 Element Plus 是一个不错的选择。在本文中&#xff0c;博主将详细介绍如何在 Vue …...

Git下载安装

一、介绍 Git是一个分布式版本控制系统&#xff0c;最初由Linus Torvalds创建&#xff0c;用于管理和跟踪代码的变化。它可以轻松地处理个人项目和大型团队项目的版本控制需求。 Git的主要特点包括&#xff1a; 分布式&#xff1a;每个开发者都可以拥有自己的本地仓库&#x…...

linux中的目录操作函数

参考 【Linux系统编程】Linux 文件系统探究&#xff1a;深入理解 struct dirent、DIR 和 struct stat结构 stat函数 C标准库提供了访问linux的目录的函数接口现对目录的操作。 一、libc接口 libc访问目录的流程为&#xff1a;打开目录&#xff0c;访问目录&#xff0c;关闭目…...

JSON 文件第一段飘红

问题 原因 这个问题通常发生在尝试用 ESLint 去解析 JSON 文件时。ESLint 主要设计用于检查 JavaScript 代码的语法和风格&#xff0c;而JSON是一种数据交换格式&#xff0c;不包含 JavaScript 的逻辑结构&#xff0c;如函数、变量声明等。 解释报错原因 当ESLint遇到它不能识…...

go使用gjson操作json数据

gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库&#xff0c;用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据&#xff0c;无需预先定义 Go 结构体或映射&#xff08;map&#xff09;来匹…...

Mac 下华为鸿蒙 :DevEco Studio 开发工具下载

1.登录&#xff1a;华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 &#xff0c;安装&#xff0c;并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报&#xff1a;淘宝镜像源错误&#xff1a; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…...

C进阶—动态内存管理

这里写目录标题 动态内存分配的原因动态内存函数mallocfreecallocrealloc C/C内存开辟柔性数组柔性数组特点 动态内存分配的原因 常见的内存开辟方式&#xff1a; int a 10;//在栈空间上开辟4个字节 char arr[10] {0};//在栈空间上开辟连续的10个字节上述开辟的空间问题&am…...

QT表格显示MYSQL数据库源码分析(七)

一. 连接MySQL数据库 首先&#xff0c;创建了一个QSqlDatabase对象&#xff0c;并设置数据库类型为"QMYSQL"。然后&#xff0c;它设置了数据库的主机名&#xff0c;端口号&#xff0c;数据库名&#xff0c;用户名和密码。最后&#xff0c;尝试打开数据库连接&#x…...

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库&#xff1a;easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具&#xff0c;底层逻辑也是基于 apache p…...

探索前后端数据传输模式:Java、Go与Python的实践20240719

深入解析前后端数据传输&#xff1a;Java、Go与Python的实践 引言 在当今的互联网时代&#xff0c;用户对Web应用的性能和交互体验有着越来越高的要求。无论是信息展示型网站还是复杂的企业应用&#xff0c;前后端数据传输的效率和模式选择都至关重要。本文将深入探讨三种主流…...

【YashanDB知识库】yac修改参数后关闭数据库hang住

【标题】yac修改参数后关闭数据库hang住 【问题分类】性能优化 【关键词】YashanDB, yac, shutdown hang 【问题描述】修改yac参数后执行shutdown immediate&#xff0c;数据库hang住。 【问题原因分析】 Shutdown操作时&#xff0c;线程在获取gInstance->trigger->s…...

提升网站性能:ThinkPHP6中如何实现Mysql分页查询

随着互联网的快速发展&#xff0c;web应用程序的开发也越来越复杂。而分页查询是web应用程序中常见的功能之一。thinkphp6是一个web框架&#xff0c;可以帮助开发人员快速开发应用程序。在本文中&#xff0c;我们将讨论如何在thinkphp6中使用mysql进行分页查询。 首先&#xf…...

Python:Flask自定义URL路由参数过滤器

目录 简单的例子手动类型转换自动类型转换自定义路由过滤器 简单的例子 先看一个简单的例子&#xff0c;GET请求需要传递一个参数&#xff0c;我们直接获取的是字符串 from flask import Flaskapp Flask(__name__)app.get("/<value>") def index(value):ret…...

闭包与装饰器

一.闭包&#xff1a; 闭包是Python中的一种高级特性&#xff0c;指的是在函数内部定义了另外一个函数&#xff0c;并返回了这个内部函数作为函数对象&#xff0c;同时还保存了外层函数的状态信息。这个内部函数可以依赖外层函数的变量和参数&#xff0c;而且外层函数返回的是这…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...