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

Swiper插件的运用和学习

news 来源：原创 2025/5/14 8:24:13

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

Swiper 是目前最流行的免费开源轮播组件之一，它功能强大、高度可定制且兼容性好，支持移动端手势操作和丰富的交互动画。

下载Swiper压缩包

轮播图演示页面。可以看见各种不同切换效果的轮播图

然后解压Swiper压缩包

找到我们要做的轮播图，然后打开新窗口，右键查看源代码

比如：轮播图演示页面，分页器 / 进度条(050)，然后在新窗口打开

右键查看源代码

这里可以看到CSS，js文件，在刚刚解压文件中找到相同文件名

在文件中找到相同文件

然后把这两个文件放在自己的代码里面

然后在自己html文档引入，在刚刚的源代码复制代码，根据需求修改

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 引入下载过来的css文件 -->
	<link rel="stylesheet" type="text/css" href="../swiper-bundle.min.css">
	<style>
		/* 自己写的div大小，以及位置 */
		.box{
			width: 80%;
			height: 400px;
			margin: 0 auto;
		}
		/* 以下是复制源代码 */
		html,
    	body {
		position: relative;
		height: 100%;
		}
	
		body {
		  background: #eee;
		  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		  /* 浏览器默认字体 */
		  font-size: 14px;
		  color: #000;
		  margin: 0;
		  padding: 0;
		}
	
		.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;
		}
		img {
		max-width: 100%;    /* 最大宽度不超过容器 */
		max-height: 100%;   /* 最大高度不超过容器 */
		width: auto;        /* 宽度自动适应 */
		height: auto;       /* 高度自动适应 */
		}

	  </style>
</head>
<body>
	 <!-- Swiper -->
	  <!-- 在复制源代码前先写一个div 来控制轮播图大小 -->
	<div class="box">

		<!-- 以下是复制源代码,也可以按需求修改  -->
		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
			  <div class="swiper-slide"><img class="container" src="../../static/xixi1.jpg" alt=""></div>
			  <div class="swiper-slide"><img class="container" src="../../static/xixi2.jpg" alt=""></div>
			  <div class="swiper-slide"><img class="container" src="../../static/xixi3.png" alt=""></div>
			  <div class="swiper-slide"><img class="container" src="../../static/xixi4.jpg" alt=""></div>
			</div>
			<!-- 前后按钮 -->
			<div class="swiper-button-next"></div>
			<div class="swiper-button-prev"></div>
			<!-- 分页器 -->
			<div class="swiper-pagination"></div>
		</div>
	</div>
	
	<!-- 引入下载过来的js文件 -->
	<script src="../swiper-bundle.min.js"></script>
	 <!-- Initialize Swiper -->

	  <!-- 复制源代码 -->
	 <script>
		var swiper = new Swiper(".mySwiper", {
			// 方向
		  pagination: {
			el: ".swiper-pagination",
			// 分页器的容器
			type: "progressbar",
			// 分页器的类型
		  },
		  navigation: {
			nextEl: ".swiper-button-next",
			// 前进按钮
			prevEl: ".swiper-button-prev",
			// 后退按钮
		  },
		});
	  </script>
</body>
</html>

需要不同特效在API文档查找

关键配置项

配置项	说明	示例值
`direction`	滑动方向	`'horizontal'` / `'vertical'`
`slidesPerView`	同时显示的幻灯片数量	`1` / `'auto'`
`spaceBetween`	幻灯片间距	`30`
`centeredSlides`	居中显示	`true`
`effect`	切换效果	`'slide'` / `'fade'` / `'cube'`
`grabCursor`	显示抓取光标	`true`
`speed`	切换速度（ms）	`800`

图片适配技巧

CSS 控制图片比例

.swiper {
  width: 100%;
  height: 500px; /* 固定容器高度 */
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 关键！保持比例填充容器 */
}

响应式适配

const swiper = new Swiper('.swiper', {
  breakpoints: {
    320: {   // 手机端
      slidesPerView: 1,
      spaceBetween: 10
    },
    768: {   // 平板
      slidesPerView: 2,
      spaceBetween: 20
    },
    1024: {  // PC
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
});