JS常用插件 Swiper插件 实现轮播图

Swiper介绍

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架

中文官网地址: https://www.swiper.com.cn/

点击查看Swiper演示,里面的功能和样式十分丰富,根据自己的需求选择

中文教程中详细介绍了如何使用Swiper

API文档中介绍了各个模块以及参数的详细信息,遇到不明白的参数可以去查阅一下

比如说delay参数,它是自动切换的时间间隔,如果觉得默认的切换太慢了,可以修改这个参数

如果想修改其中的css样式呢,我们可以自己写一个css样式把原先的给层叠掉

下载Swiper

里面有很多不同的版本,选择自己需要的下载即可。

下载解压后,swiper文件夹中的demo文件夹中就是我们Swiper演示中看到的各种各样示例文件

如果说我想实现下面这个效果:分式(060)

首先点击右上角的在新窗口打开 然后在新窗口中右键点击查看源代码

源代码中包含了html结构,css样式,js等等,待会会用到哦。

如何使用

1.引入插件相关文件。

首先查看刚才源代码中引用了哪个css、js文件,以分页(060)效果为例

然后在刚才下载好的swiper文件夹中找到swiper-bundle.min.css和swiper-bundle.min.js,复制到我们的项目中

在html中引入swiper-bundle.min.css和swiper-bundle.min.js

 <!-- 引入swipercss文件 -->
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<!-- 引入swiperjs文件 -->
<script src="js/swiper-bundle.min.js"></script>

2.按照规定语法使用

回到刚才源代码文件,复制其中swiper结构到自己代码的轮播图模块中

注意一定不要更改其中的类名和结构哦,如果更改了会导致很多css,js不起效果!

     <!-- 滑动图 --><div class="slider"><!-- 下面这块是复制的 --><!-- Swiper --><div class="swiper mySwiper"><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 class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div><div class="swiper-pagination"></div></div></div>

当然Slide 1,Slide 2这些文本可以修改哦,修改成自己的图片

<!-- 滑动图 --><div class="slider"><!-- 下面这块是复制的 --><!-- Swiper --><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="upload/banner.dpg" alt="" /></div><div class="swiper-slide"><img src="upload/banner1.dpg" alt="" /></div><div class="swiper-slide"><img src="upload/banner2.dpg" alt="" /></div><div class="swiper-slide"><img src="upload/banner3.dpg" alt="" /></div></div><div class="swiper-button-next"></div><div class="swiper-button-prev"></div><div class="swiper-pagination"></div></div>

 现在基本结构已经搭建好了,再把源代码文件中的css样式复制到自己的css文件中

    .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;}

把源代码文件中的js代码复制到自己的js文件中

<!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {pagination: {el: ".swiper-pagination",type: "fraction",},navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});

这样就ok啦!

插件的使用总结

  1. 确认插件实现的功能
  2. 去官网查看使用说明
  3. 下载插件
  4. 打开demo实例文件,查看需要引入的相关文件,并且引入
  5. 复制demo实例文件中的结构html,样式css以及js代码

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

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

相关文章

如何画出优秀的系统架构图-架构师系列-学习总结

--- 后之视今&#xff0c;亦犹今之视昔&#xff01; 目录 早期系统架构图 早期系统架构视图 41视图解读 41架构视图缺点 现代系统架构图的指导实践 业务架构 例子 使用场景 画图技巧 客户端架构、前端架构 例子 使用场景 画图技巧 系统架构 例子 定义 使用场…

C++面试宝典第19题:最长公共前缀

题目 编写一个函数来查找字符串数组中的最长公共前缀,如果不存在公共前缀,返回空字符串""。说明:所有输入只包含小写字母a-z。 示例1: 输入: ["flower", "flow", "flight"]输出: "fl" 示例2: 输入: ["dog",…

微信小程序快速入门03

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、生命周期生…

手写springBoot启动器

提示&#xff1a;springboot原理&#xff0c;手写springboot启动器&#xff0c;手写模拟SpringBoot启动过程、手写模拟SpringBoot自动配置功能 文章目录 前言一、本文内容1、手写模拟SpringBoot启动过程2、手写模拟SpringBoot自动配置功能 二、项目总体介绍三、代码实现(手写模…

R语言【paleobioDB】——pbdb_scale():通过ID选择,返回一个时间刻度的基本信息

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_scale (id, ...) Arguments 参数【id】&a…

python的库或函数不会用:使用help函数查看函数

help(time) # 查看time这个库 FUNCTIONS #函数&#xff1b;都可以调用asctime(...)asctime([tuple]) -> string #调用这个函数的参数需要一个元组&#xff08;tuple&#xff09;&#xff0c;->&#xff1a;代表返回值是string类型的#下面是简单的介绍Convert a time tup…

k8s的存储卷、数据卷---动态PV创建

当发布PVC之后可以生成PV&#xff0c;还可以在动态服务器上直接生成挂载目录。PVC直接绑定和使用PV。 动态PV需要两个组件 存储卷插件&#xff1a;Provisioner(存储分配器)根据定义的属性创建PV StorageClass&#xff1a;定义属性 存储卷插件 存储卷插件&#xff1a;k8s本…

ElasticSearch降本增效常见的方法 | 京东云技术团队

Elasticsearch在db_ranking 的排名不断上升&#xff0c;其在存储领域已经蔚然成风且占有非常重要的地位。 随着Elasticsearch越来越受欢迎&#xff0c;企业花费在ES建设上的成本自然也不少。那如何减少ES的成本呢&#xff1f;今天我们就特地来聊聊ES降本增效的常见方法&#x…

服务器和电脑有啥区别?

服务器可以说是“高配的电脑”&#xff0c;两者都有CPU、硬盘、电源等基础硬件组成&#xff0c;但服务器和电脑也是有一定区别的&#xff0c;让小编带大家了解一下吧&#xff01; #秋天生活图鉴# 1、稳定性需求不同&#xff1a;服务器是全年无休&#xff0c;需要高稳定性&…

世微大功率 内置2.5A宽电压降压恒流 LED电源驱动车灯IC AP5193

AP5193是一款PWM工作模式,高效率、外围简单、 内置功率MOS管&#xff0c;适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。电流2.5A。AP5193可实现线性调光和PWM调光&#xff0c;线性调光 脚有效电压范围0.55-2.6V. AP5193 工作频率可以通过RT 外部电阻编程来设定&#xff0c…

快乐学Python,数据分析之使用爬虫获取网页内容

在上一篇文章中&#xff0c;我们了解了爬虫的原理以及要实现爬虫的三个主要步骤&#xff1a;下载网页-分析网页-保存数据。 下面&#xff0c;我们就来看一下&#xff1a;如何使用Python下载网页。 1、网页是什么&#xff1f; 浏览器画网页的流程&#xff0c;是浏览器将用户输…

JDBC事务

1.事务 数据库事务是一组数据库操作&#xff0c;它们被视为一个单一的逻辑工作单元&#xff0c;要么全部成功执行&#xff0c;要么全部回滚&#xff08;撤销&#xff09;到事务开始前的状态。事务是确保数据库数据一致性、完整性和可靠性的关键机制之一。 简单来说&#xff0…

Python代码调试的几种方法总结

使用 pdb 进行调试 pdb 是 python 自带的一个包&#xff0c;为 python 程序提供了一种交互的源代码调试功能&#xff0c;主要特性包括设置断点、单步调试、进入函数调试、查看当前代码、查看栈片段、动态改变变量的值等。pdb 提供了一些常用的调试命令&#xff0c;详情见表 1。…

互联网加竞赛 基于机器视觉的12306验证码识别

文章目录 0 简介1 数据收集2 识别过程3 网络构建4 数据读取5 模型训练6 加入Dropout层7 数据增强8 迁移学习9 结果9 最后 0 简介 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的12306验证码识别 该项目较为新颖&#xff0c;适合作为竞赛课题方向…

6.1810: Operating System Engineering 2023 <Lab7 lock: Parallelism/locking>

一、本节任务 二、要点 2.1 文件系统&#xff08;file system&#xff09; xv6 文件系统软件层次如下&#xff1a; 通过路径树我们可以找到相应的文件&#xff1a; fd&#xff08;文件描述符&#xff09;是进程用来标识其打开的文件的手段&#xff0c;每个进程有自己的文件…

从0开始学前端第二天

学习内容&#xff1a; css 行内样式表 页内样式表 外部样式表 同步修改所有某一类标签的内容&#xff1a;内部样式表 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" conte…

程序员有哪些接s单的渠道?

这题我会&#xff01;程序员接单的渠道那可太多了&#xff0c;想要接到合适的单子&#xff0c;筛选一个合适的平台很重要。如果你也在寻找一个合适的接单渠道&#xff0c;可以参考以下这些方向。 首先&#xff0c;程序员要对接单有一个基本的概念&#xff1a;接单渠道可以先粗…

Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署

文章目录 Elasticsearch_8.11.4_kibana_8.11.4_metricbeat_8.11.4安装及本地部署_ELK日志部署分布式引擎Elasticsearch_8.11.4安装及本地部署系统环境要求1 Windows 安装 Elasticsearch下载完成后进行解压,进入 bin 目录,找到elasticsearch.bat脚本文件执行一键启动.启动都选允…

51单片机HC-SR04超声波测距lcd1602显示(程序+ad硬件设计+文档说明)

本帖主控使用STC89C52单片机&#xff0c;超声波测距采用HC-SR04模块&#xff0c;包含ad硬件设计和文档。 测距原理 超声波测距是通过不断检测超声波发射后遇到障碍物所反射的回波&#xff0c;从而测出发射和接收回波的时间差t,然后求出距SCt/2,式中的C为超声波波速。由于超声…

Golang 使用 AST 获取方法和参数名以及应用举例

背景 在做一些自动生成的代码工作时&#xff0c;有时需要知道方法以及对应的参数名 如果仅是方法&#xff0c;利用反射机制就可以解决 而参数名&#xff0c;程序编译后&#xff0c;已经丢失 可以通过 AST 事先获取方法的参数名 有了方法、参数名&#xff0c;加上反射&…