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

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

标准I/O与文件I/O

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

JavaScript函数-函数的参数

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

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

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

【进程 】

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

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

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

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

背景 最近针对一个单点登录认证项目进行性能优化&#xff0c;在 8核 16G 环境下的认证并发能力从每秒800次提升至每秒1600次&#xff0c;性能提升一倍&#xff0c;整理此次优化过程中的相关性能优化操作总结和大家分享一下。 Nginx配置优化 在并发认证场景下&#xff0c;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证书密码&#xff0c;如果需要设置密码&#xff0c;需要再配置给elasticsearch 在之前的步骤中&#xff0c;如果我们对elastic-certificates.p12 文件配置了密码…...

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

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

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

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

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

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

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

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

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

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

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

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

认识CMake并使用CMake构建自己的第一个项目

1.CMake的作用和优势 跨平台支持&#xff1a;CMake支持多种操作系统和编译器&#xff0c;使用同一份构建配置可以在不同的环境中使用 简化配置&#xff1a;通过CMakeLists.txt文件&#xff0c;用户可以定义项目结构、依赖项、编译选项等&#xff0c;无需手动编写复杂的构建脚本…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】

1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...