使用swiper_关于使用swiper制作web轮播图

89533dfa2523a886f6db1b70c6d95b9b.png

我这个方法是很适用于小白的,利用swiper插件的应用。https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法。想要用到swiper插件要在官网下载swiper文件,如下图所示,在导航条上面找到下载swiper,然后下载所有的文件就可以了。

d56effe2d770191e2ef61c3887e8c119.png

00e0c03a2acdb104f4ff0cda3d66c63d.png

下面我将介绍的是如何使用swiper。首先点击导航条的API文档,就会进入如下图的界面

0ea1b2b4184987554d427c6ff6df85f3.png

往下拉有一个叫组件的选择栏,然后你选择你想要的轮播图效果

c55fb35bfcd1c4d80d709ce03ce75e39.png

随便点击一个选项网页的右边就会出现下图界面,这里有轮播图的效果展示,你可以一个选项的找不同的效果,直到找到你喜欢的,swiper的效果够你用的了。

011d0465a7835cbf65007c717f81cfcf.png

往下拉会有代码使用的方法示例,你可以通过这行代码,实现这个效果展示,注意代码的数据是可以改的。

a7556f30969ee390e60b9ebccccc3ced.png

注意了你文件的保存路劲也是很重要的,你要找到你文件的保存路径,然后才能在代码中使用swiper。上面方法简单的介绍了利用swiper插件做网页轮播图,下面是我的swiper代码展示。

6d5c533aaf615d297e2bbe79047ff71b.png

然后把图片放到一个div定义的盒子里面,避免网页除bug。

68d931f7b14ceb08ea19b8609c5ad1b1.png

然后下图就是最后实现的效果:

beeb9ad362572f7bd7c50c049ef0386d.png

swiper是一个很好的用的脚本,了解一下对你的前端网页开发有一定的好处,我还是学生,对swiper还不是很熟悉,这篇文章是我的学习心得,希望看到我这篇文章可以给个赞,谢谢了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 2012. 数组美丽值求和

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums 。对于每个下标 i&#xff08;1 < i < nums.length - 2&#xff09;&#xff0c;nums[i] 的 美丽值 等于&#xff1a; 2&#xff0c;对于所有 0 < j < i 且 i < k < nums.length - 1 …

华为服务器上传文件后怎么通过链接查看,远程服务器文件上传后的操作

远程服务器文件上传后的操作 内容精选换一换本节指导您基于Linux操作系统环境完成镜像文件快速导入&#xff0c;推荐使用云平台的EulerOS云服务器作为转换镜像格式和生成位表文件的环境。Linux操作系统环境下&#xff0c;建议使用qemu-img-hw工具进行镜像格式转换。已完成镜像文…

Android学习笔记(十三)

Android中的广播机制 Android提供了一套完整的API&#xff0c;允许应用程序自由地发送和接受广播。 发送广播的方法借助于Intent&#xff0c;接受广播的方法需要广播接收器&#xff08;BroadcastsReceiver&#xff09;。 Android中的广播主要分为两种类型&#xff0c;标准广播和…

LeetCode 2013. 检测正方形(字典)

文章目录1. 题目2. 解题2.1 超时2.1 改进1. 题目 给你一个在 X-Y 平面上的点构成的数据流。设计一个满足下述要求的算法&#xff1a; 添加 一个在数据流中的新点到某个数据结构中。可以添加 重复 的点&#xff0c;并会视作不同的点进行处理。给你一个查询点&#xff0c;请你从…

python 获取英文人名翻译

# 获取中英文人名翻译 import time import urllib.requestdef getename(ename_dataename2cname.txt):flag "jerry.asp?id" # 特定标记位置url https://name.supfree.net/tom.asp?idalphas [chr(x) for x in range(ord(a), ord(z) 1)]with open(ename_data, w,…

浅析Java内存模型

概述 Java内存模型的主要目标是定义程序中各个变量的访问规则&#xff0c;即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节。此处的变量是线程共享的&#xff0c;存在竞争问题的。 Java内存模型规定了所有的变量都存储在主内存&#xff0c;每条线程还有自己的工…

fastapi quickstart学习

文章目录1. 安装包2. 编写代码3. 终端运行4. 文档5. 增加数据learn from https://fastapi.tiangolo.com/zh/#typer-fastapi 1. 安装包 # pip install fastapi # pip install uvicorn[standard]2. 编写代码 main.py from typing import Optional # typing 模块用于类型检查…

单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路

前面的话说起自适应布局方式&#xff0c;单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局float【思路一】float说起两列布局&#xff0c;最常见的就是使用float来实现。float浮动…

fastapi 用户指南(路径参数、查询参数、请求体)

文章目录1. 第一步1.1 小结2. 路径参数2.1 顺序很重要2.2 预设值2.3 包含路径的路径参数3. 查询参数3.1 查询参数类型转换4. 请求体learn from https://fastapi.tiangolo.com/zh/tutorial/1. 第一步 pip install fastapi[all] from fastapi import FastAPI my_app FastAPI(…

DirectX API 编程起步 #01 项目设置

目录&#xff1a; DirectX API 编程起步 #02 窗口的诞生 DirectX API 编程起步 #02 创建3D世界 这里记录了我从零开始学习使用 DirectX API 的过程。 参考教程&#xff1a;rastertek -> DirectX 11 Tutorials 准备工作 1&#xff09;首先我们要有一套能写代码的软件&#…

LeetCode 2016. 增量元素之间的最大差值

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums &#xff0c;该数组的大小为 n &#xff0c;请你计算 nums[j] - nums[i] 能求得的 最大差值 &#xff0c;其中 0 < i < j < n 且 nums[i] < nums[j] 。 返回 最大差值 。如果不存在满足要求…

LeetCode 2017. 网格游戏(前缀和)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维数组 grid &#xff0c;数组大小为 2 x n &#xff0c;其中 grid[r][c] 表示矩阵中 (r, c) 位置上的点数。 现在有两个机器人正在矩阵上参与一场游戏。 两个机器人初始位置都是 (0, 0) &#xff0c;目标位置是 (1,…

zabbix设置mysql登陆免报警_zabbix3.0 监控mysql服务免用户名密码登录的有关问题故障处理详细过程_mysql...

zabbix3.0 监控mysql服务免用户名密码登录的问题故障处理详细过程1&#xff0c;My.cnf中用户名密码无效在azure云上面&#xff0c;使用Zabbix监控mysql中&#xff0c;发现在/usr/local/mysql/my.cnf里面设置的默认用户名密码无效&#xff0c;出不来数据&#xff0c;而且在zabbi…

LeetCode 2018. 判断单词是否能放入填字游戏内(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个 m x n 的矩阵 board &#xff0c;它代表一个填字游戏 当前 的状态。 填字游戏格子中包含小写英文字母&#xff08;已填入的单词&#xff09;&#xff0c;表示 空格 的 和表示 障碍 格子的 # 。 如果满足以下条件&#xff0c;那么我…

LeetCode 2022. 将一维数组转变成二维数组

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的一维整数数组 original 和两个整数 m 和 n 。 你需要使用 original 中 所有 元素创建一个 m 行 n 列的二维数组。 original 中下标从 0 到 n - 1 &#xff08;都 包含 &#xff09;的元素构成二维数组的第一行&#xf…

LeetCode 2023. 连接后等于目标字符串的字符串对

文章目录1. 题目2. 解题1. 题目 给你一个 数字 字符串数组 nums 和一个 数字 字符串 target &#xff0c;请你返回 nums[i] nums[j] &#xff08;两个字符串连接&#xff09;结果等于 target 的下标 (i, j) &#xff08;需满足 i ! j&#xff09;的数目。 示例 1&#xff1a…

What day is that day?(快速幂,打表找周期,或者求通项公式)

有些题怎么都解不出来&#xff0c;这时候可以打表&#xff0c;找规律&#xff0c;求通项公式等&#xff0c;这些方法让人拍手叫绝&#xff0c;真不错…… Description Its Saturday today, what day is it after 11 22 33 ... NN days? Input There are multiple test cas…

mysql中数据定义语言_SQL数据定义语言(DDL)

数据库模式定义语言DDL(DataDefinition Language)&#xff0c;是用于描述数据库中要存储的现实世界实体的语言。一个数据库模式包含该数据库中所有实体的描述定义。这些定义包括结构定义、操作方法定义等。DDL描述的模式&#xff0c;必须由计算机软件进行编译&#xff0c;转换为…

db2 脚本运行错误返回错误原因_电脑运行错误代码大全,遇到报错请自己对照断电原因所在吧...

电脑在运行的时候&#xff0c;会出现一些代码&#xff0c;软件安装不上啊或电脑使用中蓝屏啊出现的代码&#xff0c;每一次出现问题电脑都会以代码的形式反馈&#xff0c;我们就可以凭借错误代码来判断故障源。小编整理了一些常出现的错误代码和问题分享给大家&#xff0c;希望…

LeetCode 2028. 找出缺失的观测数据

文章目录1. 题目2. 解题1. 题目 现有一份 n m 次投掷单个 六面 骰子的观测数据&#xff0c;骰子的每个面从 1 到 6 编号。 观测数据中缺失了 n 份&#xff0c;你手上只拿到剩余 m 次投掷的数据。 幸好你有之前计算过的这 n m 次投掷数据的 平均值 。 给你一个长度为 m 的整…