swiper的基础使用(十五)

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

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide" style="background-image:url(img/4.jpg)">第一页</div><div class="swiper-slide" style="background-image:url(img/5.jpg)">第二页</div><div class="swiper-slide" style="background-image:url(img/6.jpg)">第三页</div></div><div class="swiper-pagination swiper-pagination-white"></div><div class="swiper-button-next swiper-button-white"></div><div class="swiper-button-prev swiper-button-white"></div></div>

为了动画效果明显，我在每个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的基础使用(十五)相关推荐

JAVASE基础模块十五（StringBuffer类）
JAVASE基础模块十五(StringBuffer类) public class Stbuffer { public static void main(String[] args) { //总共创建五 ...
想要专升本你不得不看的全干货_吐血整理_专升本_计算机文化基础（十五）
大家好,我是阿Ken.很快就要整理完第三章了~ 对于专升本_计算机文化基础我已经在博客里整理了已经一半多了,希望能够在我整理后能够帮助其他的小伙伴,这月底整理完所有的专升本_计算机文化基础的笔记,感兴 ...
java基础第二十五天数据库
1. mysql数据库基本操作 1.1 mysql.mysqladmin和mysqldump 1.1.1. mysql命令 mysql指令连接数据库连接数据库 mysql -h host_name - ...
JAVA基础学习(十五)--集合二--TreeSet和泛型
一.TreeSet 1.1.TreeSet Set:hashSet:数据结构是哈希表.线程是非同步的. 保证元素唯一性的原理:判断元素的HashCode值是否相同. 如果相同,还会判断元素的equal ...
java 取整型的低八位_Java 基础（十五）并发工具包 concurrent
本文目录: java.util.concurrent - Java 并发包简介阻塞队列 BlockingQueue 数组阻塞队列 ArrayBlockingQueue 延迟队列 DelayQueue ...
机器学习基础（十五）—— blending
base algorithm vs meta-algorithm(建立在其他算法基础之上的算法):这是只有集成学习才有的一对概念: uniform blending: (1)blending:TT 个 ...
python中继承和组合的区别_Py修行路 python基础（十五）面向对象编程继承组合接口和抽象类...
一.前提回忆: 1.类是用来描述某一类的事物,类的对象就是这一类事物中的一个个体.是事物就要有属性,属性分为 1:数据属性:就是变量 2:函数属性:就是函数,在面向对象里通常称为方法注意:类和对象均 ...
Java 基础（十五）并发工具包 concurrent
本文目录: java.util.concurrent - Java 并发包简介阻塞队列 BlockingQueue 数组阻塞队列 ArrayBlockingQueue 延迟队列 DelayQueue ...
Python基础（十五）——函数
本文以Python3以上为学习基础. 1.函数概念对于函数,我们先看看数学中:y=x+1. 这就是一个数学的一次函数.不过更多是写作f(x) = x + 1.我肯可以看到,我们给x不一样的值,最后的 ...

swiper的基础使用(十五)

swiper的基础使用(十五)相关推荐

最新文章

热门文章