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

Swiper插件的运用和学习

news 2026/2/9 16:00:21

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 是目前最流行的免费开源轮播组件之一，它功能强大、高度可定制且兼容性好，支持移动端手势操作和丰富的交互动画。下载Swiper压缩包轮播图演示页面。可以看见各种不同切换效果的轮播图然后解压…...

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

标准I/O与文件I/O

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

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

JavaScript函数-函数的参数

在JavaScript编程语言中，函数是组织代码和实现复杂逻辑的基本单元。而函数参数则是这些功能的重要组成部分，它们允许我们将数据传递给函数，从而使得函数更加通用和灵活。本文将深入探讨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 云平台，并通过 MQTT 协议上传 DHT11 获取的温湿度值。二、项目框图三、DHT11工作原理参考于良许嵌入式手把手教你玩转DHT11（原理驱动） | 良许嵌入式 3.1 正常工作验证 # 上电后&#xff…...

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

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

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

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

【进程】

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

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

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

引入通过前面的文章，我们对HBase已经有了基本认识，下面我们从HBase最核心的算法和数据结构进一步深入HBase。 HBase的一个列簇（Column Family）本质上就是一棵LSM树（Log-Structured Merge-Tree）。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

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

背景最近针对一个单点登录认证项目进行性能优化，在 8核 16G 环境下的认证并发能力从每秒800次提升至每秒1600次，性能提升一倍，整理此次优化过程中的相关性能优化操作总结和大家分享一下。 Nginx配置优化在并发认证场景下，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证书密码，如果需要设置密码，需要再配置给elasticsearch 在之前的步骤中，如果我们对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开发中，内存管理是一个既基础又关键的一部分知识。尽管Qt提供了自动化的父子对象管理机制，但在复杂的应用场景中（如多线程、动态UI、异步操作等），我们在开发过程中，仍可能遇到内存泄漏、野指针、重复释…...

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

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

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

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

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

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

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

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

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

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录一、问题背景与挑战二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/2/7 5:16:28

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2026/1/22 15:36:10

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2026/1/9 19:36:58

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一，概述 1. 目的将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动使能uart3(TX:PH00 RX:PH01)，并让boo…...

编程新知 2026/2/5 6:28:09

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。第三部分&am…...

编程新知 2026/1/25 2:04:42

深度学习水论文：mamba＋图像增强

🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...

编程新知 2026/1/26 4:52:47

PHP 8.5 即将发布：管道操作符、强力调试

前不久，PHP宣布了即将在 2025 年 11 月 20 日正式发布的 PHP 8.5！作为 PHP 语言的又一次重要迭代，PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是，借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50