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 配置文件 没有正确设置 自动挂载。该磁盘 没有被正确识别，需要手动挂载。文件系统错误 导致挂载失败。 下面是解…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）
可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。 链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理
引言 Bitmap（位图）是Android应用内存占用的“头号杀手”。一张1080P（1920x1080）的图片以ARGB_8888格式加载时，内存占用高达8MB（192010804字节）。据统计，超过60%的应用OOM崩溃与Bitm…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
在 Spring Boot 项目里，MYSQL中json类型字段使用
前言： 因为程序特殊需求导致，需要mysql数据库存储json类型数据，因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...