博客> swiper的基础使用(十五)
swiper的基础使用(十五)
2019-12-05 17:41 评论:0 阅读:746 zhanying
html5 swiper

本文为H5EDU机构官方的HTML5培训教程 swiper教程。

这次内容我们介绍在swiper页面的翻页动画--渐变效果 既然有翻页,那么肯定少不了翻页效果,这个功能在swiper当中也给我们进行了包装,所以我们在使用的时候变得非常的方便。 首先进行基本的布局以及CSS样式的设置。

第一页
第二页
第三页

为了动画效果明显,我在每个slide当中添加了背景图片。 然后在JS当中进行初始化,并且添加翻页动画的属性。 var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev', effect:'fade' //动画效果:渐变 }); 这样就实现了渐变的翻页动画,很简单,就是在初始化当中添加了一条属性(effect:'fade')

点击进入swiper强化教程: Enter your link description here:

收藏
0
sina weixin mail 回到顶部