JS 流行库（五）：Swiper

Swiper 是使用 JavaScript 实现的跨平台滑动特效插件，开源、免费、稳定、简单且功能强大，可以实现焦点图、tab 切换等常用效果

此篇笔记中 Swiper 的版本为 8.x

基本使用

导入 swiper 库

示例如下：

<link rel="stylesheet" href="./swiper-bundle.css">
<script src="./swiper-bundle.js"></script>

不同版本的 Swiper 中导入的文件不同

HTML 结构

示例如下：

<style>.swiper {width: 600px;height: 300px;text-align: center;border: 1px solid black;border-radius: 15px;box-shadow: 0 0 10px gray;margin: 50px auto;}.swiper-wrapper {line-height: 300px;}
</style>
<div class="swiper"><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>
</div>

JavaScript 代码

示例如下：

window.onload = function () {let mySwiper = new Swiper('.swiper');
}

高级使用

以下将介绍的功能均基于上述已初始化的焦点图

分页器

在 Swiper 中新增分页器的过程如下所示：

HTML 结构

示例如下：

<div class="swiper"><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><div class="swiper-pagination"></div>
</div>

JavaScript 代码

示例如下：

window.onload = function () {let mySwiper = new Swiper('.swiper', {pagination: {   // 分页el: '.swiper-pagination',   // DOM 元素clickable: true,            // 分页点击dynamicBullets: true        // 动态分页}});
}

在上述示例中，演示了部分 pagination 的属性，详情可以查询 API 文档

无限循环

如果在 Swiper 中实现无限循环，那么可以在初始化时配置选项，从而实现无限循环功能，示例如下：

window.onload = function () {let mySwiper = new Swiper('.swiper', {pagination: {el: '.swiper-pagination',clickable: true,dynamicBullets: true},loop: true  // 无限循环});
}

自动切换

如果在 Swiper 中实现自动切换，那么可以在初始化时配置选项，从而实现自动切换功能，示例如下：

window.onload = function () {let mySwiper = new Swiper('.swiper', {pagination: {el: '.swiper-pagination',clickable: true,dynamicBullets: true},loop: true,autoplay: { // 自动切换delay: 2000 // 延迟时间}});
}

动画

在切换焦点图内容时，Swiper 可以为内容添加动画，过程如下：

HTML 结构

示例如下：

<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceIn">Slide 1</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInDown">Slide 2</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInUp">Slide 3</p></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>

JavaScript 代码

示例如下：

window.onload = function () {let mySwiper = new Swiper('.swiper', {pagination: {el: '.swiper-pagination',clickable: true,dynamicBullets: true},loop: true,autoplay: {delay: 2000},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},on: {init: function () {swiperAnimateCache(this);   // 隐藏动画元素 swiperAnimate(this);        // 初始化完成开始动画},slideChangeTransitionEnd: function () {swiperAnimate(this);        // 每个 slide 切换结束时也运行当前 slide 动画}}});
}

Swiper 中动画效果的底层原理是 CSS3 的动画，如此我们可以在 CSS 代码中自定义动画，示例如下：

@keyframes myAnimation {0% {opacity: 0;transform: scale(2);}100% {opacity: 1;transform: scale(1);}
}.myAnimation {animation-name: myAnimation;
}

将相应 DOM 元素的 swiper-animate-effect 属性设置为自定义动画名称即可，示例如下：

<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><p class="ani" swiper-animate-effect="myAnimation">Reyn Morales</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInDown">Slide 2</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInUp">Steven Jobs</p></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>

此外，也可以在 HTML 中通过 swiper-animate-duration 和 swiper-animate-delay 属性配置动画的持续时间和延迟时间，示例如下：

<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><p class="ani" swiper-animate-effect="myAnimation">Reyn Morales</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slide 2</p></div><div class="swiper-slide"><p class="ani" swiper-animate-effect="bounceInUp">Steven Jobs</p></div></div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>

JS 流行库（五）：Swiper相关推荐

JS 流行库（七）：WOW
JS 流行库(七):WOW WOW.js 是 Animate.css 的扩充,以让页面滚动更加有趣,在页面滚动的过程中逐渐释放动画效果,示例如下: WOW.js 首页; 即 WOW.js + Anim ...
JS 流行库（三）：Zepto
JS 流行库(三):Zepto Zepto 框架是一个类似于 jQuery 的轻量级框架,抛弃了低级浏览器的适配问题,所以体积更小,如果会使用 jQuery,那么基本上也会使用 Zepto,jQuer ...
当前最流行的 js 工具库
高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考.写代码也是同样的道理,工具用好了,你就有更多的时间来规划架构和攻克难点.今天就给大家分享一下当前最流行的 js 工具库,如 ...
extjs chart无法在panel中显示_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
JS工具库moment —— 实现日历
moment moment是一个js工具库,这个库中封装的是日期时间的方法,功能很全面.可以去moment官网看看,它的中文文档介绍的也很详细,主要是看一下方法的使用.附上官网地址:moment.js ...
10个常用的JS工具库
10个常用的JS工具库,80%的项目都在用! Avue Cloud 2022-01-26 09:46 图片高手区别于普通人的重要一点是,他们善于利用工具,把更多的时间留给了规划和思考.写代码也是同样 ...
Gremlins.js – 模拟用户随机操作的 JS 测试库
Gremlins.js 是基于 JavaScript 编写的 Monkey 测试库,支持 Node.js 平台和浏览器中使用.Gremlins.js 随机模拟用户操作:单击窗口中的任意位置,在表格中输 ...
js折线图设置y轴刻度_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
Angular Chart.js第三方库ng-chartjs基础使用
Angular Chart.js第三方库ng-chartjs基础使用项目github地址这个项目支持基本的Chart.js图表,并且支持内联插件和全局插件的使用. Demo地址支持图表类型 li ...

JS 流行库（五）：Swiper

JS 流行库（五）：Swiper

基本使用

高级使用

分页器

无限循环

自动切换

导航

动画

JS 流行库（五）：Swiper相关推荐

最新文章

热门文章