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

Swiper插件的运用和学习

news 2025/9/19 12:23:17

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

Swiper 是目前最流行的免费开源轮播组件之一，它功能强大、高度可定制且兼容性好，支持移动端手势操作和丰富的交互动画。

下载Swiper压缩包

轮播图演示页面。可以看见各种不同切换效果的轮播图

然后解压Swiper压缩包

找到我们要做的轮播图，然后打开新窗口，右键查看源代码

比如：轮播图演示页面，分页器 / 进度条(050)，然后在新窗口打开

右键查看源代码

这里可以看到CSS，js文件，在刚刚解压文件中找到相同文件名

在文件中找到相同文件

然后把这两个文件放在自己的代码里面

然后在自己html文档引入，在刚刚的源代码复制代码，根据需求修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入下载过来的css文件 --><link rel="stylesheet" type="text/css" href="../swiper-bundle.min.css"><style>/* 自己写的div大小，以及位置 */.box{width: 80%;height: 400px;margin: 0 auto;}/* 以下是复制源代码 */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;}img {max-width: 100%;    /* 最大宽度不超过容器 */max-height: 100%;   /* 最大高度不超过容器 */width: auto;        /* 宽度自动适应 */height: auto;       /* 高度自动适应 */}</style>
</head>
<body><!-- Swiper --><!-- 在复制源代码前先写一个div 来控制轮播图大小 --><div class="box"><!-- 以下是复制源代码,也可以按需求修改  --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><img class="container" src="../../static/xixi1.jpg" alt=""></div><div class="swiper-slide"><img class="container" src="../../static/xixi2.jpg" alt=""></div><div class="swiper-slide"><img class="container" src="../../static/xixi3.png" alt=""></div><div class="swiper-slide"><img class="container" src="../../static/xixi4.jpg" alt=""></div></div><!-- 前后按钮 --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div><!-- 分页器 --><div class="swiper-pagination"></div></div></div><!-- 引入下载过来的js文件 --><script src="../swiper-bundle.min.js"></script><!-- Initialize Swiper --><!-- 复制源代码 --><script>var swiper = new Swiper(".mySwiper", {// 方向pagination: {el: ".swiper-pagination",// 分页器的容器type: "progressbar",// 分页器的类型},navigation: {nextEl: ".swiper-button-next",// 前进按钮prevEl: ".swiper-button-prev",// 后退按钮},});</script>
</body>
</html>

需要不同特效在API文档查找

关键配置项

配置项说明示例值
direction滑动方向'horizontal' / 'vertical'
slidesPerView同时显示的幻灯片数量1 / 'auto'
spaceBetween幻灯片间距30
centeredSlides居中显示true
effect切换效果'slide' / 'fade' / 'cube'
grabCursor显示抓取光标true
speed切换速度（ms）800

图片适配技巧

CSS 控制图片比例
.swiper {width: 100%;height: 500px; /* 固定容器高度 */
}.swiper-slide img {width: 100%;height: 100%;object-fit: cover; /* 关键！保持比例填充容器 */
}
响应式适配
const swiper = new Swiper('.swiper', {breakpoints: {320: {   // 手机端slidesPerView: 1,spaceBetween: 10},768: {   // 平板slidesPerView: 2,spaceBetween: 20},1024: {  // PCslidesPerView: 3,spaceBetween: 30}}
});

官方文档地址：Swiper API （强烈建议收藏参考）

中文api - Swiper中文网

相关文章：

Swiper插件的运用和学习

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 Swiper 是目前最流行的免费开源轮播组件之一&#xff0c;它功能强大、高度可定制且兼容性好&#xff0c;支持移动端手势操作和丰富的交互动画。 下载Swiper压缩包 轮播图演示页面。可以看见各种不同切换效果的轮播图 然后解压…...

编程日记 2025/2/23 18:14:01

标准I/O与文件I/O

一、概念 标准IO&#xff1a;标准IO是指程序与标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;之间的输入输出操作。通常用于与用户交互或输出调试信息。文件IO&#xff1a;文件IO是指程序与文件系统…...

编程日记 2025/2/23 18:10:53

JavaScript函数-函数的参数

在JavaScript编程语言中&#xff0c;函数是组织代码和实现复杂逻辑的基本单元。而函数参数则是这些功能的重要组成部分&#xff0c;它们允许我们将数据传递给函数&#xff0c;从而使得函数更加通用和灵活。本文将深入探讨JavaScript函数参数的各种特性及其最佳实践。 参数基础…...

编程日记 2025/2/23 18:09:49

Android TabLayout 实现随意控制item之间的间距

效果 红色标注是不同的间距。 实现方式 1、xml中定义 <com.google.android.material.tabs.TabLayoutandroid:id"id/tab_layout"android:layout_width"wrap_content"app:tabIndicatorColor"color/color_FF00B2E3"app:tabBackground"a…...

编程日记 2025/2/23 18:02:22

STM32的“Unique device ID“能否修改？

STM32F1系列的"Unique device ID"寄存器的地址为0x1FFFF7E8。 这个寄存器是只读的。 "Unique device ID"寄存器位于“System memory”中。“System memory”地址范围为“0x1FFF F000- 0x1FFF F7FF”。 所有STM32 MCU上都存在系统引导加载程序。顾名思义&a…...

编程日记 2025/2/23 18:01:20

STM32-温湿度上传OneNET项目

一、项目需求 使用 ESP8266 连接 OneNET 云平台&#xff0c;并通过 MQTT 协议上传 DHT11 获取的温湿度值。 二、项目框图 三、DHT11工作原理 参考于良许嵌入式手把手教你玩转DHT11&#xff08;原理驱动&#xff09; | 良许嵌入式 3.1 正常工作验证 #​ 上电后&#xff…...

编程日记 2025/2/23 17:55:07

前端面试-JavaScript 数据类型详解

目录 一、数据类型分类 二、核心区别对比 1. 存储方式 2. 比较方式 3. 类型检测方法 三、特殊类型详解 1. Symbol 2. BigInt 3. null vs undefined 四、常见面试扩展问题 五、总结 一、数据类型分类 JavaScript 数据类型分为 基本数据类型&#xff08;原始类型&…...

编程日记 2025/2/23 17:54:05

【进程 】

【进程】 目录1. ELF格式程序与进程2. 进程的组织方式3. 进程的复刻&#xff08;fork&#xff09;4. 进程的状态 目录 1. ELF格式程序与进程 在Linux系统里&#xff0c;程序文件普遍采用ELF&#xff08;Executable and Linkable Format&#xff09;格式。这种格式的程序文件存…...

编程日记 2025/2/23 17:53:02

深入HBase——数据结构与算法

引入 通过前面的文章&#xff0c;我们对HBase已经有了基本认识&#xff0c;下面我们从HBase最核心的算法和数据结构进一步深入HBase。 HBase的一个列簇&#xff08;Column Family&#xff09;本质上就是一棵LSM树&#xff08;Log-Structured Merge-Tree&#xff09;​。LSM树…...

编程日记 2025/2/23 17:49:57

Python爬虫实战：获取六图网漫画图

注意：以下内容仅供技术研究，请遵守目标网站的robots.txt规定，控制请求频率避免对目标服务器造成过大压力！ 一、引言 Python 作为一种广泛应用于数据处理和网络爬虫领域的编程语言，拥有丰富的库和框架。其中，Scrapy 框架以其高效、灵活、可扩展等特点，成为构建爬虫程序的…...

编程日记 2025/2/23 17:46:52

HAProxy介绍与编译安装

目录 1、HAProxy介绍 2、HAProxy编译安装 Centos 基础环境 Ubuntu 基础环境 编译安装HAProxy 验证HAProxy版本 HAProxy启动脚本 配置文件 启动haproxy 验证haproxy状态 查看haproxy的状态页面 1、HAProxy介绍 HAProxy是法国开发者 威利塔罗(Willy Tarreau) 在2000年…...

编程日记 2025/2/23 17:45:45

全链路优化：如何让单点登录认证接口并发性能翻倍？

背景 最近针对一个单点登录认证项目进行性能优化&#xff0c;在 8核 16G 环境下的认证并发能力从每秒800次提升至每秒1600次&#xff0c;性能提升一倍&#xff0c;整理此次优化过程中的相关性能优化操作总结和大家分享一下。 Nginx配置优化 在并发认证场景下&#xff0c;Ngi…...

编程日记 2025/2/23 17:43:35

在Spring Boot中如何使用Freemaker模板引擎

在 Spring Boot 中使用 FreeMarker 模板引擎可以帮助你创建动态的 Web 页面。以下是详细的步骤和示例代码，介绍如何在 Spring Boot 项目里集成和使用 FreeMarker。 1. 添加依赖 如果你使用的是 Maven 项目，需要在 pom.xml 文件中添加 FreeMarker 相关依赖。Spring Boot 提供…...

编程日记 2025/2/23 17:39:27

Elasticsearch7.1.1 配置密码和SSL证书

生成SSL证书 ./elasticsearch-certutil ca -out config/certs/elastic-certificates.p12 -pass 我这里没有设置ssl证书密码&#xff0c;如果需要设置密码&#xff0c;需要再配置给elasticsearch 在之前的步骤中&#xff0c;如果我们对elastic-certificates.p12 文件配置了密码…...

编程日记 2025/2/23 17:35:14

个人简历html网页模板，科技感炫酷html简历模板

炫酷动效登录页 引言 在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效…...

编程日记 2025/2/23 17:26:00

在LangFlow中集成OpenAI Compatible API类型的大语言模型

一、背景与核心价值 从Dify换到这个langflow真的时各种的不适应啊。 就比如这个OpenAI Compatible API，这不应该是基本操作嘛？ 算了，服了，习惯了就好了。咱闲言少叙，正片开始： LangFlow作为LangChain的可视化开发工具，其最大优势在于无需编写代码即可构建复杂的大模型…...

编程日记 2025/2/23 17:23:52

Qt开发中有关内存管理方面常见的问题分析与解决方案

在Qt开发中&#xff0c;内存管理是一个既基础又关键的一部分知识。尽管Qt提供了自动化的父子对象管理机制&#xff0c;但在复杂的应用场景中&#xff08;如多线程、动态UI、异步操作等&#xff09;&#xff0c;我们在开发过程中&#xff0c;仍可能遇到内存泄漏、野指针、重复释…...

编程日记 2025/2/23 17:22:32

【outOfMemoryError】排查思路与解决方案

前言 不好啦❗ 天塌了❗ 系统崩了❗ 快看啊&#xff0c;程序outOfMemoryError了&#x1f648; 我的心里活动&#xff1a;“哈哈哈&#x1f600;哈哈哈&#x1f600;终于给我碰上了&#xff0c;这个问题可很少发生啊&#xff0c;又积累一个问题。虽然我昨天发了版本&#xff0…...

编程日记 2025/2/23 17:19:10

Python蓝桥杯刷题-小数第n位详解

题目描述 我们知道&#xff0c;整数做除法时&#xff0c;有时得到有限小数&#xff0c;有时得到无限循环小数。 如果我们把有限小数的末尾加上无限多个 0&#xff0c;它们就有了统一的形式。 本题的任务是&#xff1a;在上面的约定下&#xff0c;求整数除法小数点后的第 n 位开…...

编程日记 2025/2/23 17:18:02

Ubuntu服务器 /data 盘需要手动挂载的解决方案

服务器 /data 盘需要手动挂载的解决方案 如果重启服务器后&#xff0c;发现 /data 盘 没有自动挂载&#xff0c;通常是因为&#xff1a; /etc/fstab 配置文件 没有正确设置 自动挂载。该磁盘 没有被正确识别&#xff0c;需要手动挂载。文件系统错误 导致挂载失败。 下面是解…...

编程日记 2025/2/23 17:11:53

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/8/10 5:27:29

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/7/7 9:09:17

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/18 12:54:41

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/8/26 21:58:04

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/9/13 19:32:45

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/9/17 23:45:35

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04