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

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.案例演示

image-20230924165835779

5.api文档

https://www.swiper.com.cn/api/start/new.html

相关文章:

swiper使用

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

基于遗传算法解决的多仓库多旅行推销员问题(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

微信小程序 工具使用(HBuilderX)

微信小程序 工具使用:HBuilderX 一 HBuilderX 的下载二 工具的配置2.1 工具 --> 设置 --> 运行配置2.1.1 微信开发者工具路径2.1.2 node 运行配置 2.2 插件 工具 --> 插件安装2.2.1 下载插件 三 微信小程序端四 同步运行五 BUG5.1 nodemon在终端无法识别 一 HBuilderX…...

设计模式:观察者模式(C++实现)

观察者模式&#xff08;Observer Pattern&#xff09;是一种设计模式&#xff0c;用于定义对象之间的一对多依赖关系&#xff0c;当一个对象&#xff08;称为主题或可观察者&#xff09;的状态发生变化时&#xff0c;它的所有依赖对象&#xff08;称为观察者&#xff09;都会收…...

【前端打怪升级日志之微前端框架篇】微前端qiankun框架子应用间跳转方法

参考链接qiankun官网&#xff1a;微应用之间如何跳转&#xff1f; 1.主应用、子应用路由都是hash模式 主应用根据 hash 来判断微应用&#xff0c;无需考虑该问题 2.主应用根据path判断子应用 方法实现适用条件参数传递存在问题a标签跳转<a href"/toA"></…...

C语言中的typedef struct用法

在学习数据结构的时候&#xff0c;我经常遇到typedef struct&#xff0c;刚开始感觉很别扭&#xff0c;查阅资料之后才真真理解了。 先从结构体说起。 1、结构体用法 struct Student{int age;char s;}如果要定义一个该结构体变量&#xff0c;就需要:struct Student st1; 有没…...

司徒理财:9.27黄金原油日内多空走势行情操作建议

黄金走势分析&#xff1a;      黄金昨日抵达了此前一直强调的日线布林下轨的1903位置&#xff0c;甚至更低&#xff01;昨天的空单也是直接获利收割了&#xff01;现在如果是要继续做空&#xff0c;下方是有日线支撑的&#xff0c;甚至周线的支撑也不远&#xff0c;在1890…...

C++设计模式(Design Patterns)

设计模式主要原则 单一职责原则&#xff08;Single Responsibility Principle&#xff09; 实现类要职责单一 里氏替换原则&#xff08;Liskov Substitution Principle&#xff09; 不要破坏继承关系 依赖倒置原则&#xff08;Dependence Inversion Principle&#xff09; …...

vue点击按钮收缩菜单

问题描述 VUE菜单有一个BUG&#xff0c;当我们点击其它按钮或者首页的时候&#xff0c;已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。 错误展示 错误的效果请看下图。 解决方法 1、寻找菜单文件 因为我使用的是ruoyi的前端框…...

Vue 防止忘记的命令

创建新项目 npm init vuelatest cd <项目名> npm install npm run dev 运行项目 yarn yarn serve 这里如果我用npm install 或者npm run serve会报错&#xff0c;但是新建项目用npm就不会&#xff0c;有大佬知道为什么吗...

APACHE NIFI学习之—RouteOnContent

RouteOnContent 描述: 通过正则表达式匹配输入数据流的内容,然后将输入数据流的副本路由到正则表达式相匹配的输出数据流。 正则表达式作为用户自定义的属性添加,并以该属性名称为输出连线,其值为正则表达式所匹配数据流内容。 当用户定义的属性支持属性表达式语言时,其结…...

【C语言】【结构体的内存对齐】计算结构体内存大小,有图解

计算结构体内存大小&#xff0c;需要用到结构体内存对齐的知识 来段代码看看什么是结构体对齐&#xff1a; #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的&#xff0c;升级NVM也不能解决&#xff0c;需要将UEFI driver 包到NVM里。操作步骤如下&#xff1a; 1. 下载Preboot软件包&#xff0c;有Windows和Linux版本&#xff0c;本次使用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扩展插件&#xff08;用于显示目录&#xff09; 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本身没有提供链接数据库的功能&#xff0c;所以我们需要借助第三方的工具包来实现。 &#xff08;有这个jar包之后&#xff0c;jmeter可以发起jdbc请求&#xff0c;没有这个jar包&#xff0c;也有jdbc取样器&#xff0c;但不能…...

蓝桥等考Python组别二级007

第一部分:选择题 1、Python L2 (15分) 下面哪个不是Python的基本数据类型?( ) 布尔型整数型指针型字符串正确答案:C 2、Python L2...

Java如何解决浮点数计算不精确问题

有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是浮点数计算不精确问题? 在 Java 中&#xff0c;浮点数计算不精确问题指的是使用浮点数进…...

一图读懂「五度易链」企业创新服务解决方案,打造卓越营商环境!

“五度易链”紧密围绕园区企业及产业发展需求&#xff0c;基于数据积累和应用&#xff0c;创新企业服务机制&#xff0c;提升企业服务效能&#xff0c;以数字化手段为企业发展纾困解难&#xff0c;赋能企业高质量发展。并帮助园区在运营方面打破数据壁垒&#xff0c;实现数据监…...

软件工程 第一次随堂练习

以下答案是经过人工智能生成&#xff0c;个人理解得出的答案&#xff0c;若有不同见解&#xff0c;请在评论区留言或私信 说明下列需求分别属于下面的哪种类型&#xff0c;为什么&#xff1f; A.业务需求 B.用户需求 C.系统级&#xff08;功能&#xff09;需求 D.性能需求 E.质…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...