前端笔记——Swiper（持续更新中）~

目录

介绍

安装

1、CDN

2、安装到本地

引入

使用

初始化

配置

Basic 基本配置

Loop 循环配置

Effects 滑动效果配置

Pagination 分页器

Navigation 前进后退按钮

Autoplay 自动切换

介绍

Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。

Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。Swiper 可以通过 npm 安装，也可以直接在 HTML 文件中引入 CSS 和 JavaScript 文件来使用。

安装

1、CDN

可以进入Swiper CDN – Swiper中文网直接复制，一般使用4.0.1版本，复制下面两行，并且修改版本号即可。

将版本号改为4.0.1，不能用4.0.0，有bug。

Swiper 4.0.0 在某些情况下可能会出现一些已知的 bug，例如：

1. 在 iOS Safari 上，滑动时可能会出现卡顿和闪烁的问题；
2. 在使用动画效果时，可能会出现性能问题；
3. 在某些场景下，可能会出现布局错乱的问题。

这些问题在 Swiper 4.0.1 中得到了修复，因此建议使用 Swiper 4.0.1 或更高版本。

2、安装到本地

将cdn的路径直接复制到浏览器打开，保存到本地，可行但太low，不适合我们高端人才。

使用npm

npm init -ynpm i swiper@4.0.1

引入

<!---->

如上，即可将swiper引入到我们的项目中。

使用

• 初始化

slider1slider2slider3var mySwiper = new Swiper('.swiper', {//这个名字要改成swiper-containerautoplay: true,//可选选项，自动滑动})

注意：由于我们使用的swiper4，最外层class名要改为swiper-container，下面的js也要改。

• 配置

Swiper 提供了丰富的配置选项，可以帮助我们实现各种复杂的滑动效果和交互动画。下面我们将介绍一些常用的配置选项。

Basic 基本配置

Swiper的基本配置包括轮播图的容器和轮播图的内容。我们需要创建一个包含轮播图容器和轮播图内容的 HTML 结构，然后使用 JavaScript 初始化 Swiper。

以下是一个基本的 Swiper 配置示例：

/* 设置轮播图容器的高度 */.swiper-container {height: 400px;}/* 设置轮播图的宽度和高度 */.swiper-slide {width: 100%;height: 100%;}/* 设置轮播图中图片的宽度和高度 */.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}// 初始化 Swipervar swiper = new Swiper('.swiper-container', {// 设置滑动效果和方向effect: 'fade',direction: 'horizontal',// 设置自动播放和分页器autoplay: {delay: 3000,disableOnInteraction: false,},});

在上面的示例中，我们创建了一个包含轮播图容器和轮播图内容的 HTML 结构。我们将轮播图容器的高度设置为400px，然后在容器中添加了三张图片。我们使用JavaScript初始化了 Swiper，并设置了滑动效果、自动播放等配置选项。

Loop 循环配置

Loop 循环配置是 Swiper 的一个常用功能，可以实现轮播图的无限循环播放。我们可以通过配置选项来启用和自定义 Loop 循环配置。

以下是一个启用了 Loop 循环配置的示例：

/* 设置轮播图容器的高度 */.swiper-container {height: 400px;}/* 设置轮播图的宽度和高度 */.swiper-slide {width: 100%;height: 100%;}/* 设置轮播图中图片的宽度和高度 */.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}// 初始化 Swipervar 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',},});

在上面的示例中，我们启用了 Loop 循环配置，设置loop: true即可。此外，我们还添加了前进后退按钮，方便用户手动控制轮播图的播放。

Effects 滑动效果配置

Swiper 支持多种滑动效果，可以通过配置选项来设置滑动效果。以下是几种常用的滑动效果：

• slide：普通滑动效果（默认值）。
• fade：淡入淡出效果。
• cube：立方体旋转效果。
• coverflow：3D 翻转效果。

我们可以通过设置effect属性来启用并自定义滑动效果。例如，以下示例使用了淡入淡出效果：

/* 设置轮播图容器的高度 */.swiper-container {height: 400px;}/* 设置轮播图的宽度和高度 */.swiper-slide {width: 100%;height: 100%;}/* 设置轮播图中图片的宽度和高度 */.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}// 初始化 Swipervar swiper = new Swiper('.swiper-container', {// 启用淡入淡出效果effect: 'fade',// 设置自动播放和分页器autoplay: {delay: 3000,disableOnInteraction: false,},pagination: {el: '.swiper-pagination',clickable: true,},});

在上面的示例中，我们设置effect: 'fade'启用了淡入淡出效果，并添加了分页器用于展示当前轮播图的位置。

Pagination 分页器

pagination 分页器是 Swiper 内置的一个组件，用于显示当前轮播图的页码和总页数。我们可以通过配置选项来启用和自定义 pagination 分页器。

以下是一个启用了 pagination 分页器的示例：

/* 设置轮播图容器的高度 */.swiper-container {height: 400px;}/* 设置轮播图的宽度和高度 */.swiper-slide {width: 100%;height: 100%;}/* 设置轮播图中图片的宽度和高度 */.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}// 初始化 Swipervar 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 '' + (index + 1) + '';},},});

在上面的示例中，我们启用了 pagination 分页器，并自定义了分页器的样式和渲染方式。具体来说，我们设置了pagination.el选项为.swiper-pagination，表示将分页器添加到指定的 HTML 元素中。我们还设置了pagination.clickable选项为true，表示分页器上的页码可以被点击。我们还自定义了分页器的渲染方式，通过pagination.renderBullet选项返回一个包含页码的 HTML 元素。

不要忘记html标签也要复制，注意粘贴位置

Navigation 前进后退按钮

navigation 前进后退按钮是 Swiper 内置的一个组件，用于显示前进和后退按钮，以便用户可以手动控制轮播图的滑动方向。我们可以通过配置选项来启用和自定义 navigation 前进后退按钮。

以下是一个启用了 navigation 前进后退按钮的示例：

/* 设置轮播图容器的高度 */.swiper-container {height: 400px;}/* 设置轮播图的宽度和高度 */.swiper-slide {width: 100%;height: 100%;}/* 设置轮播图中图片的宽度和高度 */.swiper-slide img {width: 100%;height: 100%;object-fit: cover;}// 初始化 Swipervar swiper = new Swiper('.swiper-container', {// 设置滑动效果和方向effect: 'fade',direction: 'horizontal',// 设置自动播放和分页器autoplay: {delay: 3000,disableOnInteraction: false,},// 设置前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});

在上面的示例中，我们启用了 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 的时候，还需要注意一些其他的配置选项，例如轮播图的切换效果、轮播图的方向、轮播图的循环等等，这些选项可以根据实际需求进行调整。

文章写作不易，对您有帮助的话，欢迎点赞收藏 ⭐留言如有错误敬请指正！