Swiper插件的运用和学习
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压缩包 轮播图演示页面。可以看见各种不同切换效果的轮播图 然后解压…...
标准I/O与文件I/O
一、概念 标准IO：标准IO是指程序与标准输入（stdin）、标准输出（stdout）和标准错误（stderr）之间的输入输出操作。通常用于与用户交互或输出调试信息。文件IO：文件IO是指程序与文件系统…...
JavaScript函数-函数的参数
在JavaScript编程语言中，函数是组织代码和实现复杂逻辑的基本单元。而函数参数则是这些功能的重要组成部分，它们允许我们将数据传递给函数，从而使得函数更加通用和灵活。本文将深入探讨JavaScript函数参数的各种特性及其最佳实践。 参数基础…...
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…...
STM32的“Unique device ID“能否修改？
STM32F1系列的"Unique device ID"寄存器的地址为0x1FFFF7E8。 这个寄存器是只读的。 "Unique device ID"寄存器位于“System memory”中。“System memory”地址范围为“0x1FFF F000- 0x1FFF F7FF”。 所有STM32 MCU上都存在系统引导加载程序。顾名思义&a…...
STM32-温湿度上传OneNET项目
一、项目需求 使用 ESP8266 连接 OneNET 云平台，并通过 MQTT 协议上传 DHT11 获取的温湿度值。 二、项目框图 三、DHT11工作原理 参考于良许嵌入式手把手教你玩转DHT11（原理驱动） | 良许嵌入式 3.1 正常工作验证 # 上电后ÿ…...
前端面试-JavaScript 数据类型详解
目录 一、数据类型分类 二、核心区别对比 1. 存储方式 2. 比较方式 3. 类型检测方法 三、特殊类型详解 1. Symbol 2. BigInt 3. null vs undefined 四、常见面试扩展问题 五、总结 一、数据类型分类 JavaScript 数据类型分为 基本数据类型（原始类型&…...
【进程 】
【进程】 目录1. ELF格式程序与进程2. 进程的组织方式3. 进程的复刻（fork）4. 进程的状态 目录 1. ELF格式程序与进程 在Linux系统里，程序文件普遍采用ELF（Executable and Linkable Format）格式。这种格式的程序文件存…...
深入HBase——数据结构与算法
引入 通过前面的文章，我们对HBase已经有了基本认识，下面我们从HBase最核心的算法和数据结构进一步深入HBase。 HBase的一个列簇（Column Family）本质上就是一棵LSM树（Log-Structured Merge-Tree）。LSM树…...
Python爬虫实战：获取六图网漫画图
注意：以下内容仅供技术研究，请遵守目标网站的robots.txt规定，控制请求频率避免对目标服务器造成过大压力！ 一、引言 Python 作为一种广泛应用于数据处理和网络爬虫领域的编程语言，拥有丰富的库和框架。其中，Scrapy 框架以其高效、灵活、可扩展等特点，成为构建爬虫程序的…...
HAProxy介绍与编译安装
目录 1、HAProxy介绍 2、HAProxy编译安装 Centos 基础环境 Ubuntu 基础环境 编译安装HAProxy 验证HAProxy版本 HAProxy启动脚本 配置文件 启动haproxy 验证haproxy状态 查看haproxy的状态页面 1、HAProxy介绍 HAProxy是法国开发者 威利塔罗(Willy Tarreau) 在2000年…...
全链路优化：如何让单点登录认证接口并发性能翻倍？
背景 最近针对一个单点登录认证项目进行性能优化，在 8核 16G 环境下的认证并发能力从每秒800次提升至每秒1600次，性能提升一倍，整理此次优化过程中的相关性能优化操作总结和大家分享一下。 Nginx配置优化 在并发认证场景下，Ngi…...
在Spring Boot中如何使用Freemaker模板引擎
在 Spring Boot 中使用 FreeMarker 模板引擎可以帮助你创建动态的 Web 页面。以下是详细的步骤和示例代码，介绍如何在 Spring Boot 项目里集成和使用 FreeMarker。 1. 添加依赖 如果你使用的是 Maven 项目，需要在 pom.xml 文件中添加 FreeMarker 相关依赖。Spring Boot 提供…...
Elasticsearch7.1.1 配置密码和SSL证书
生成SSL证书 ./elasticsearch-certutil ca -out config/certs/elastic-certificates.p12 -pass 我这里没有设置ssl证书密码，如果需要设置密码，需要再配置给elasticsearch 在之前的步骤中，如果我们对elastic-certificates.p12 文件配置了密码…...
个人简历html网页模板，科技感炫酷html简历模板
炫酷动效登录页 引言 在网页设计中，按钮是用户交互的重要元素之一。这样一款黑色个人简历html网页模板，科技感炫酷html简历模板，设计效果类似科技看板图，可帮您展示技能、任职经历、作品等，喜欢这种风格的小伙伴不要犹豫哦。该素材呈现了数据符号排版显示出人形的动画效…...
在LangFlow中集成OpenAI Compatible API类型的大语言模型
一、背景与核心价值 从Dify换到这个langflow真的时各种的不适应啊。 就比如这个OpenAI Compatible API，这不应该是基本操作嘛？ 算了，服了，习惯了就好了。咱闲言少叙，正片开始： LangFlow作为LangChain的可视化开发工具，其最大优势在于无需编写代码即可构建复杂的大模型…...
Qt开发中有关内存管理方面常见的问题分析与解决方案
在Qt开发中，内存管理是一个既基础又关键的一部分知识。尽管Qt提供了自动化的父子对象管理机制，但在复杂的应用场景中（如多线程、动态UI、异步操作等），我们在开发过程中，仍可能遇到内存泄漏、野指针、重复释…...
【outOfMemoryError】排查思路与解决方案
前言 不好啦❗ 天塌了❗ 系统崩了❗ 快看啊，程序outOfMemoryError了🙈 我的心里活动：“哈哈哈😀哈哈哈😀终于给我碰上了，这个问题可很少发生啊，又积累一个问题。虽然我昨天发了版本࿰…...
Python蓝桥杯刷题-小数第n位详解
题目描述 我们知道，整数做除法时，有时得到有限小数，有时得到无限循环小数。 如果我们把有限小数的末尾加上无限多个 0，它们就有了统一的形式。 本题的任务是：在上面的约定下，求整数除法小数点后的第 n 位开…...
Ubuntu服务器 /data 盘需要手动挂载的解决方案
服务器 /data 盘需要手动挂载的解决方案 如果重启服务器后，发现 /data 盘 没有自动挂载，通常是因为： /etc/fstab 配置文件 没有正确设置 自动挂载。该磁盘 没有被正确识别，需要手动挂载。文件系统错误 导致挂载失败。 下面是解…...
CSS如何处理旧版浏览器的浮动兼容性_利用zoom-1触发hasLayout清除css浮动
zoom: 1 是IE6/7中修复浮动塌陷最轻量、零副作用的hasLayout触发方式，须作用于浮动元素的父容器，现代项目无需使用。IE6/7里浮动元素塌陷怎么办直接上结论：用 zoom: 1 是当时最轻量、最稳妥的触发 hasLayout 方式，但只对 IE6/7 有…...
STM32定时器实战：PWMI双通道捕获解析PWM信号（频率与占空比测量）
1. PWM信号测量基础与STM32定时器概述 PWM（脉冲宽度调制）信号是嵌入式系统中常见的控制信号，广泛应用于电机调速、LED调光、电源管理等领域。一个完整的PWM信号包含两个关键参数：频率和占空比。频率决定了信号周期的快慢ÿ…...
CN3703 5A 三节锂电池充电管理集成电路
概述: CN3703 是 PWM 降压模式三节锂电池充电管理集成电路，独立对三节锂电池充电进行自动管理,具有封装外形小，外围元器件少和使用简单等优点。 CN3703 具有恒流和恒压充电模式，非常适合锂电池的充电。在恒压充电模式，CN3703将电池…...
Qwen3.5-9B-GGUF保姆级教程：service.log日志解读与常见启动失败根因分析
Qwen3.5-9B-GGUF保姆级教程：service.log日志解读与常见启动失败根因分析 1. 引言 Qwen3.5-9B-GGUF是阿里云开源的Qwen3.5-9B模型经过GGUF格式量化后的版本，采用Gated Delta Networks架构和混合注意力机制（75%线性25%标准）&#…...
保姆级教程：用Ollama部署translategemma-12b-it，翻译图片文字就这么简单
保姆级教程：用Ollama部署translategemma-12b-it，翻译图片文字就这么简单 你是不是也遇到过这种情况：拿到一份英文的产品说明书截图，或者一张满是英文的会议白板照片，想要快速翻译成中文，却只能手动打字或者…...
如何5分钟破解8大网盘限速？LinkSwift网盘直链下载助手完整指南
如何5分钟破解8大网盘限速？LinkSwift网盘直链下载助手完整指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘…...
从医学图像到工业质检：UNet这个‘老将’为何在2024年依然能打？聊聊它的实战变形记
从医学图像到工业质检：UNet这个‘老将’为何在2024年依然能打？聊聊它的实战变形记 在深度学习模型日新月异的今天，Transformer和Diffusion模型占据了大量研究视线，但当我们把目光投向工业界实际应用场景——无论是PCB板上的微小缺…...
树、森林——树和森林的遍历（森林的遍历）
森林由多棵互不相交的树组成，遍历规则：按树的顺序依次遍历每一棵树 森林同样没有中序遍历，只有两种： 1. 森林先序遍历 访问第一棵树的根结点 先序遍历第一棵树的所有子树 依次先序遍历剩下所有树 对应关系：森林先序遍历…...
手把手教你将FAST-LIO2部署到Jetson Orin/NX：从源码编译到实车测试避坑全记录
FAST-LIO2在Jetson Orin/NX上的实战部署指南：从编译优化到实车调参全解析 引言 当Livox Mid-70激光雷达以10Hz频率吐出数万点云数据，而Jetson Orin NX的ARM架构处理器必须在20毫秒内完成运动补偿、状态估计和地图更新时，传统SLAM方案往往面临…...
Cyber Engine Tweaks完整指南：如何为AMD处理器优化《赛博朋克2077》性能
Cyber Engine Tweaks完整指南：如何为AMD处理器优化《赛博朋克2077》性能 【免费下载链接】CyberEngineTweaks Cyberpunk 2077 tweaks, hacks and scripting framework 项目地址: https://gitcode.com/gh_mirrors/cy/CyberEngineTweaks Cyber Engine Tweaks&a…...