Swiper插件的运用和学习
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: { // PCslidesPerView: 3,spaceBetween: 30}}
});