Swiper Animate插件
写在最前面的话
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、Swiper Animate使用方法
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、使用步骤
1.引入css文件和JS文件
代码如下(示例):
<link rel="stylesheet" href="./swiper-bundle.min.css">
<link rel="stylesheet" href="./animate.min.css">
<script src="./swiper-bundle.min.js"></script>
<script src="./swiper.animate1.0.3.min.js"></script>
2.创建轮播标签结构(建议复制插件demo中的结构) 并修改轮播内容
代码如下(示例):
<div class="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="ani" swiper-animate-effect="fadeInDown" src="./img/1db4c77678ec4602a80b2c730217131a.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="tada" src="./img/325d30b845c0446dac80fcbaf105fed8.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="bounceOutDown" src="./img/789524d91a2145ca9352be72aa99579a.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="flipInY" src="./img/ca6c4f201f0d47b486b56c1b42919b46.jpeg" alt=""></div>
<div class="swiper-slide"><img class="ani" swiper-animate-effect="rotateIn" src="./img/fefece13ee684dd9bbd462a49a09ee5e.jpeg" alt=""></div>
</div>
<!-- Add Pagination 指示器-->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
##第三步: 创建Swiper对象,并配置功能
代码如下(示例):
var mySwiper = new Swiper ('.swiper-container', {
// on 指展示功能, 需要设置为动画形式展示轮播的每一页
})
##第四步:设置轮播图选项
// 第一个参数是, 样式选择器, 对应轮播图最外层div
// 第二个参数是, 轮播功能选项
var swiper = new Swiper('.swiper-container', {
slidesPerView: 1, // 每次显示几页
spaceBetween: 0, // 两页之间的间隙
loop: true, // 无限循环
pagination: { // 轮播指示器
el: '.swiper-pagination', // 指向指示器父标签
clickable: true, // 是否可以点击指示器执行切换
},
navigation: { // 设置轮播导航
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay:true,
on:{
// init 表示每一个将要展示之前的设置 (一般先隐藏这一页的动画内容)
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
// 当轮播的这一页展示出来时, 开始执行显示内容动画
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
//this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); //动画只展现一次,去除ani类名
}
}
总结
总结: 轮播动画展示步骤
1. 导入四个插件
2, 复制并修改轮播结构
3, 创建swiper对象并设置轮播功能和动画功能
4, 给需要做动画的标签添加对应的属性
2020-09-25第一次写自己的博客
一会我要赶十一点五十的班车,就长话短说了。今天是我第一次写我的博客,有这个想法很久了,却一直没有实现。都说万事开头难,既然我开头了,那我就一定要坚持下去,把我学到的东西及时总结到这里。今天可能时间有点仓促,下次一定要认真去总结规划。