swiper轮播图插件的使用步骤

耶啵奶膘

已于 2022-05-24 20:14:23 修改

阅读量3.6k

点赞数 5

分类专栏：知识点、步骤文章标签： jquery 前端 javascript

于 2022-05-18 21:06:20 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/124845587

版权

知识点、步骤专栏收录该内容

16 篇文章 2 订阅

订阅专栏

一、参考文档

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文档找到自己想要的功能。

耶啵奶膘

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
swiper轮播图插件的使用步骤

swiper轮播图使用步骤
复制链接

扫一扫

专栏目录

swiper轮播图插件的使用步骤

一、参考文档

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下载下来。

2.操作步骤

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

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

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

（4）目录结构。

（5）整体结构与使用

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

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

三、总结

“相关推荐”对你有帮助么？