一、参考文档

1.官网：https://swiper.com.cn/

2.案例展示：https://swiper.com.cn/demo/index.html

3.获取swiper文件：https://swiper.com.cn/download/index.html

4.API文档：https://swiper.com.cn/api/index.html

二、使用步骤

（一）简易案例步骤

1.进入官网，先将swiper下载下来。

获取里面的两个文件：
一个css文件、一个js文件。稍后需要使用。

2.操作步骤

（1）在案例里面找到自己喜欢的样式。点击它右上角的“在新窗口打开”

（2）得到该案例的全屏展示效果，右键——查看页面源代码

（3）展开之后看到源代码，直接全部复制，并粘贴到自己的html文件里面。把标红地方的路径地址改为自己本地的路径。（上面已经让你下载过了）

（4）目录结构。

（5）整体结构与使用

效果展示：

（6）简易案例的全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>轮播图</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!-- Link Swiper's CSS --><link rel="stylesheet" href="./css/swiper-bundle.min.css"><!-- Swiper JS --><script src="./js/swiper-bundle.min.js"></script><!-- Demo styles --><style>.swiperBox{width: 400px;height: 300px;border: 1px solid red;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style></head><body><div class="swiperBox"><!-- 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><!-- 前进后退按钮 --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></div><!-- Initialize Swiper --><script>var swiper = new Swiper(".mySwiper", {navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev",},});</script></body>
</html>

（二）如果想实现其他功能，需要查看API文档

比如：
我想实现自动轮播，找到有关的API点进去看看。

也就是说写上autoplay:true就可以实现自动轮播，如果我想调整时间呢，一秒钟切换一次。delay属性控制时间。

var mySwiper = new Swiper('.swiper', {autoplay: {delay: 1000,//1秒切换一次},
});

如果想出现分页器：https://swiper.com.cn/api/pagination/362.html
如果想循环则使用：https://swiper.com.cn/api/loop/22.html
如果想复制文字：https://www.swiper.com.cn/api/swiping/39.html
以上都加上之后的效果是：

代码：

三、总结

1.进入官网，找到喜欢的样式，复制源代码，然后该js和css文件路径。
2.根据API文档找到自己想要的功能。

swiper轮播图插件的使用步骤相关推荐

swiper轮播图插件
一.简介 ①Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端.Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. ②Swiper 是一款免费以及 ...
react 中使用Swiper轮播图插件
第一步.安装 npm i swiper 第二步.使用 import { Swiper, SwiperSlide } from 'swiper/react'; //根据自己的需要引用样式 import ...
Swiper 轮播图插件实现
https://github.com/nolimits4web/swiper 1. 引入 <link rel="stylesheet" th:href="@{/ma ...
Swiper轮播图插件之如何修改前进后退按钮swiper-button-prev和swiper-button-next的默认样式
第一步: 在轮播图最外层的容器中将原本前进后退按钮的大小设置为0 注意: Swiper6之前的默认容器是'.swiper-container',Swiper7之后的默认容器是'.swiper'. .s ...
关于修改swiper轮播图插件中的小圆点变成背景图
当我们使用swiper插件时,底部的小点点需要修改成图片样式的形状,下面分享一下如何修改:  <div class="swip ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
get几个小技能：轮播图插件、进度条插件、筛选过滤插件
最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...
轮播图插件--swiper
轮播图插件swiper下载方式输入网址:https://www.swiper.com.cn/ 进入官网,点击 "获取Swiper" >点击 "下载Swiper&q ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...

swiper轮播图插件的使用步骤