swiper使用
介绍
Swiper(swiper master)是一个第三方的库,可以用来实现移动端、pc端的滑动操作。,swiper应用广泛,使用频率仅次于jquery, 轮播图类排名第一,是网页设计师必备技能,众多耳熟能详的品牌在使用:阿里、腾讯、百度、拼多多、网易、华为、格力、喜茶、顺丰等,大量demo即下即用,前端新手亦可快捷做出精美效果。简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等。
使用介绍
1.导入文件
<link rel="stylesheet" href="./css/swiper-bundle.min.css"><script src="./js/swiper-bundle.min.js"></script>
2.html
<div class="swiper" style="width: 600px;height: 300px;"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>
3.js
<script>var mySwiper = new Swiper('.swiper', {direction: 'horizontal', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})
</script>
4.案例演示
5.api文档
https://www.swiper.com.cn/api/start/new.html
相关文章:

swiper使用
介绍 Swiper(swiper master)是一个第三方的库,可以用来实现移动端、pc端的滑动操作。,swiper应用广泛,使用频率仅次于jquery, 轮播图类排名第一,是网页设计师必备技能,众多耳熟能详的品牌在使用…...

基于遗传算法解决的多仓库多旅行推销员问题(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

微信小程序 工具使用(HBuilderX)
微信小程序 工具使用:HBuilderX 一 HBuilderX 的下载二 工具的配置2.1 工具 --> 设置 --> 运行配置2.1.1 微信开发者工具路径2.1.2 node 运行配置 2.2 插件 工具 --> 插件安装2.2.1 下载插件 三 微信小程序端四 同步运行五 BUG5.1 nodemon在终端无法识别 一 HBuilderX…...
设计模式:观察者模式(C++实现)
观察者模式(Observer Pattern)是一种设计模式,用于定义对象之间的一对多依赖关系,当一个对象(称为主题或可观察者)的状态发生变化时,它的所有依赖对象(称为观察者)都会收…...
【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法
参考链接qiankun官网:微应用之间如何跳转? 1.主应用、子应用路由都是hash模式 主应用根据 hash 来判断微应用,无需考虑该问题 2.主应用根据path判断子应用 方法实现适用条件参数传递存在问题a标签跳转<a href"/toA"></…...
C语言中的typedef struct用法
在学习数据结构的时候,我经常遇到typedef struct,刚开始感觉很别扭,查阅资料之后才真真理解了。 先从结构体说起。 1、结构体用法 struct Student{int age;char s;}如果要定义一个该结构体变量,就需要:struct Student st1; 有没…...
司徒理财:9.27黄金原油日内多空走势行情操作建议
黄金走势分析: 黄金昨日抵达了此前一直强调的日线布林下轨的1903位置,甚至更低!昨天的空单也是直接获利收割了!现在如果是要继续做空,下方是有日线支撑的,甚至周线的支撑也不远,在1890…...
C++设计模式(Design Patterns)
设计模式主要原则 单一职责原则(Single Responsibility Principle) 实现类要职责单一 里氏替换原则(Liskov Substitution Principle) 不要破坏继承关系 依赖倒置原则(Dependence Inversion Principle) …...

vue点击按钮收缩菜单
问题描述 VUE菜单有一个BUG,当我们点击其它按钮或者首页的时候,已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。 错误展示 错误的效果请看下图。 解决方法 1、寻找菜单文件 因为我使用的是ruoyi的前端框…...
Vue 防止忘记的命令
创建新项目 npm init vuelatest cd <项目名> npm install npm run dev 运行项目 yarn yarn serve 这里如果我用npm install 或者npm run serve会报错,但是新建项目用npm就不会,有大佬知道为什么吗...
APACHE NIFI学习之—RouteOnContent
RouteOnContent 描述: 通过正则表达式匹配输入数据流的内容,然后将输入数据流的副本路由到正则表达式相匹配的输出数据流。 正则表达式作为用户自定义的属性添加,并以该属性名称为输出连线,其值为正则表达式所匹配数据流内容。 当用户定义的属性支持属性表达式语言时,其结…...

【C语言】【结构体的内存对齐】计算结构体内存大小,有图解
计算结构体内存大小,需要用到结构体内存对齐的知识 来段代码看看什么是结构体对齐: #include<stdio.h> struct S1 {char a;char b;int num; }; struct S2 {char a;int num;char b; }; int main() {printf("%zd\n", sizeof(struct S1))…...
Intel 700 800系网卡升级支持WOL UEFI PXE方法
Intel 700 800系网卡默认的NVM版本是不支持UEFI的,升级NVM也不能解决,需要将UEFI driver 包到NVM里。操作步骤如下: 1. 下载Preboot软件包,有Windows和Linux版本,本次使用Linux版本做示例。 Intel Ethernet Connecti…...

vue3 - 使用 xlsx 库将数据导出到 Excel 文件
GitHub Demo 地址 在线预览 xlsx是由SheetJS开发的一个处理excel文件的JavaScript库。它可以读取、编写和操作 Excel 文件 安装xlsx npm install xlsx --save实现一个通过的数据导出工具类 import * as XLSX from xlsx/*** description: 导出excel* param {any} dataList* p…...

机器学习,深度学习
一 、Numpy 1.1 安装numpy 2.2 Numpy操作数组 jupyter扩展插件(用于显示目录) 1、pip install jupyter_contrib_nbextensions -i https://pypi.tuna.tsinghua.edu.cn/simple 2、pip install jupyter_nbextensions_configurator -i https://pypi.tuna.t…...

【性能测试】jmeter连接数据库jdbc
一、下载第三方工具包驱动数据库 1. 因为JMeter本身没有提供链接数据库的功能,所以我们需要借助第三方的工具包来实现。 (有这个jar包之后,jmeter可以发起jdbc请求,没有这个jar包,也有jdbc取样器,但不能…...
蓝桥等考Python组别二级007
第一部分:选择题 1、Python L2 (15分) 下面哪个不是Python的基本数据类型?( ) 布尔型整数型指针型字符串正确答案:C 2、Python L2...
Java如何解决浮点数计算不精确问题
有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是浮点数计算不精确问题? 在 Java 中,浮点数计算不精确问题指的是使用浮点数进…...

一图读懂「五度易链」企业创新服务解决方案,打造卓越营商环境!
“五度易链”紧密围绕园区企业及产业发展需求,基于数据积累和应用,创新企业服务机制,提升企业服务效能,以数字化手段为企业发展纾困解难,赋能企业高质量发展。并帮助园区在运营方面打破数据壁垒,实现数据监…...
软件工程 第一次随堂练习
以下答案是经过人工智能生成,个人理解得出的答案,若有不同见解,请在评论区留言或私信 说明下列需求分别属于下面的哪种类型,为什么? A.业务需求 B.用户需求 C.系统级(功能)需求 D.性能需求 E.质…...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄
文|魏琳华 编|王一粟 一场大会,聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中,汇集了学界、创业公司和大厂等三方的热门选手,关于多模态的集中讨论达到了前所未有的热度。其中,…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接:3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...

shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...