目录
介绍
Swiper 是一个流行的、免费的、开源的 JavaScript 库,用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果,如淡入淡出、平移、3D 立体翻转等,同时也支持响应式设计和自动播放等功能。
Swiper 具有良好的可定制性和易用性,支持多种平台和浏览器,还提供了丰富的 API 和事件,可以轻松地实现各种复杂的滑动效果和交互动画。Swiper 可以通过 npm 安装,也可以直接在 HTML 文件中引入 CSS 和 JavaScript 文件来使用。
安装
1、CDN
可以进入Swiper CDN - Swiper中文网 直接复制,一般使用4.0.1
版本,复制下面两行,并且修改版本号即可。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>
将版本号改为4.0.1
,不能用4.0.0
,有bug。
Swiper 4.0.0 在某些情况下可能会出现一些已知的 bug,例如:
- 在 iOS Safari 上,滑动时可能会出现卡顿和闪烁的问题;
- 在使用动画效果时,可能会出现性能问题;
- 在某些场景下,可能会出现布局错乱的问题。
这些问题在 Swiper 4.0.1 中得到了修复,因此建议使用 Swiper 4.0.1 或更高版本。
2、安装到本地
将cdn的路径直接复制到浏览器打开,保存到本地,可行但太low,不适合我们高端人才。
使用npm
npm init -y
npm i swiper@4.0.1
引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
</body>
</html>
如上,即可将swiper引入到我们的项目中。
使用
-
初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
</head>
<body>
<div class="swiper"><!--这个名字要改成swiper-container-->
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper', {//这个名字要改成swiper-container
autoplay: true,//可选选项,自动滑动
})
</script>
</body>
</html>
注意:由于我们使用的swiper4,最外层class名要改为
swiper-container
,下面的js也要改。
-
配置
Swiper 提供了丰富的配置选项,可以帮助我们实现各种复杂的滑动效果和交互动画。下面我们将介绍一些常用的配置选项。
Basic 基本配置
Swiper 的基本配置包括轮播图的容器和轮播图的内容。我们需要创建一个包含轮播图容器和轮播图内容的 HTML 结构,然后使用 JavaScript 初始化 Swiper。
以下是一个基本的 Swiper 配置示例:
<!DOCTYPE html>
<html>
<head>
<title>Swiper 示例</title>
<!-- 引入 Swiper 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<style>
/* 设置轮播图容器的高度 */
.swiper-container {
height: 400px;
}
/* 设置轮播图的宽度和高度 */
.swiper-slide {
width: 100%;
height: 100%;
}
/* 设置轮播图中图片的宽度和高度 */
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
</div>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 设置滑动效果和方向
effect: 'fade',
direction: 'horizontal',
// 设置自动播放和分页器
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
});
</script>
</body>
</html>
在上面的示例中,我们创建了一个包含轮播图容器和轮播图内容的 HTML 结构。我们将轮播图容器的高度设置为 400px
,然后在容器中添加了三张图片。我们使用 JavaScript 初始化了 Swiper,并设置了滑动效果、自动播放等配置选项。
Loop 循环配置
Loop 循环配置是 Swiper 的一个常用功能,可以实现轮播图的无限循环播放。我们可以通过配置选项来启用和自定义 Loop 循环配置。
以下是一个启用了 Loop 循环配置的示例:
<!DOCTYPE html>
<html>
<head>
<title>Swiper 示例</title>
<!-- 引入 Swiper 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<style>
/* 设置轮播图容器的高度 */
.swiper-container {
height: 400px;
}
/* 设置轮播图的宽度和高度 */
.swiper-slide {
width: 100%;
height: 100%;
}
/* 设置轮播图中图片的宽度和高度 */
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
<!-- 添加前进后退按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 设置滑动效果和方向
effect: 'fade',
direction: 'horizontal',
// 设置自动播放和分页器
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
// 启用 Loop 循环配置
loop: true,
// 添加前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
在上面的示例中,我们启用了 Loop 循环配置,设置 loop: true
即可。此外,我们还添加了前进后退按钮,方便用户手动控制轮播图的播放。
Effects 滑动效果配置
Swiper 支持多种滑动效果,可以通过配置选项来设置滑动效果。以下是几种常用的滑动效果:
slide
:普通滑动效果(默认值)。fade
:淡入淡出效果。cube
:立方体旋转效果。coverflow
:3D 翻转效果。
我们可以通过设置 effect
属性来启用并自定义滑动效果。例如,以下示例使用了淡入淡出效果:
<!DOCTYPE html>
<html>
<head>
<title>Swiper 示例</title>
<!-- 引入 Swiper 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<style>
/* 设置轮播图容器的高度 */
.swiper-container {
height: 400px;
}
/* 设置轮播图的宽度和高度 */
.swiper-slide {
width: 100%;
height: 100%;
}
/* 设置轮播图中图片的宽度和高度 */
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
</div>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 启用淡入淡出效果
effect: 'fade',
// 设置自动播放和分页器
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>
在上面的示例中,我们设置 effect: 'fade'
启用了淡入淡出效果,并添加了分页器用于展示当前轮播图的位置。
Pagination 分页器
pagination 分页器是 Swiper 内置的一个组件,用于显示当前轮播图的页码和总页数。我们可以通过配置选项来启用和自定义 pagination 分页器。
以下是一个启用了 pagination 分页器的示例:
<!DOCTYPE html>
<html>
<head>
<title>Swiper 示例</title>
<!-- 引入 Swiper 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<style>
/* 设置轮播图容器的高度 */
.swiper-container {
height: 400px;
}
/* 设置轮播图的宽度和高度 */
.swiper-slide {
width: 100%;
height: 100%;
}
/* 设置轮播图中图片的宽度和高度 */
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
<!-- 添加分页器 -->
<div class="swiper-pagination"></div>
</div>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 设置滑动效果和方向
effect: 'fade',
direction: 'horizontal',
// 设置自动播放和分页器
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
},
},
});
</script>
</body>
</html>
在上面的示例中,我们启用了 pagination 分页器,并自定义了分页器的样式和渲染方式。具体来说,我们设置了 pagination.el
选项为 .swiper-pagination
,表示将分页器添加到指定的 HTML 元素中。我们还设置了 pagination.clickable
选项为 true
,表示分页器上的页码可以被点击。我们还自定义了分页器的渲染方式,通过 pagination.renderBullet
选项返回一个包含页码的 HTML 元素。
不要忘记html标签也要复制,注意粘贴位置
Navigation 前进后退按钮
navigation 前进后退按钮是 Swiper 内置的一个组件,用于显示前进和后退按钮,以便用户可以手动控制轮播图的滑动方向。我们可以通过配置选项来启用和自定义 navigation 前进后退按钮。
以下是一个启用了 navigation 前进后退按钮的示例:
<!DOCTYPE html>
<html>
<head>
<title>Swiper 示例</title>
<!-- 引入 Swiper 样式文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/css/swiper.min.css">
<style>
/* 设置轮播图容器的高度 */
.swiper-container {
height: 400px;
}
/* 设置轮播图的宽度和高度 */
.swiper-slide {
width: 100%;
height: 100%;
}
/* 设置轮播图中图片的宽度和高度 */
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg"></div>
<div class="swiper-slide"><img src="image2.jpg"></div>
<div class="swiper-slide"><img src="image3.jpg"></div>
</div>
<!-- 添加前进后退按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- 引入 Swiper JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.1/js/swiper.min.js"></script>
<script>
// 初始化 Swiper
var swiper = new Swiper('.swiper-container', {
// 设置滑动效果和方向
effect: 'fade',
direction: 'horizontal',
// 设置自动播放和分页器
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
// 设置前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
在上面的示例中,我们启用了 navigation 前进后退按钮,并设置了前进和后退按钮的 HTML 元素。具体来说,我们设置了 navigation.nextEl
选项为 .swiper-button-next
,表示将后退按钮添加到指定的 HTML 元素中。我们还设置了 navigation.prevEl
选项为 .swiper-button-prev
,表示将前进按钮添加到指定的 HTML 元素中。
注意html标签也要复制,注意粘贴位置
Autoplay 自动切换
autoplay
选项是 Swiper 中控制自动播放的配置选项,可以设置轮播图自动播放的间隔时间、是否在用户操作后停止自动播放等。以下是 autoplay
选项的详细介绍:
delay
:自动播放的间隔时间,默认值为3000
毫秒,即 3 秒。disableOnInteraction
:用户操作后是否停止自动播放。默认值为true
,即用户操作后停止自动播放,可以设置为false
来禁止此功能。stopOnLastSlide
:是否在轮播图的最后一张停止自动播放。默认值为false
,即不停止自动播放,可以设置为true
来停止自动播放。reverseDirection
:是否反向播放轮播图。默认值为false
,即正向播放,可以设置为true
来反向播放轮播图。waitForTransition
:在进行轮播图切换时,是否等待过渡效果完成后再进行下一次自动播放。默认值为true
,即等待过渡效果完成再自动播放,可以设置为false
来不等待过渡效果。
以下是一个完整的 autoplay
配置示例:
var swiper = new Swiper('.swiper-container', {
// 其他配置选项...
autoplay: {
delay: 3000,
disableOnInteraction: false,
stopOnLastSlide: false,
reverseDirection: false,
waitForTransition: true,
},
});
在使用
autoplay
选项时,需要注意一些潜在的问题,例如自动播放可能会对用户体验造成负面影响,因此应该将自动播放的间隔时间控制得不要过短,以免影响用户的阅读体验。另外,在使用 Swiper 的时候,还需要注意一些其他的配置选项,例如轮播图的切换效果、轮播图的方向、轮播图的循环等等,这些选项可以根据实际需求进行调整。
文章写作不易,对您有帮助的话,欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!