swiper的基础使用(十六)

本文为H5EDU机构官方的HTML5培训教程 swiper教程。
这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。
 
首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="logo.png"></div>
                <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"></div>
        </div>

然后在js当中进行初始化以及添加翻页动画。依然是一条属性,但是有些不同。

var swiper = new Swiper(‘.swiper-container‘,{
                pagination:‘.swiper-pagination‘,
                grabCursor:true,
                effect:‘cube‘,  //翻页效果:方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

那么除了直接添加的属性意外,我们的翻页动画当中还有着自己的属性,就是这里

cube:{
                    shadow:true,   //阴影效果,如果设置为false下面的就不用
                    slideShadows:true,  //页面阴影效果
                    shadowOffset:20,  //阴影的偏移值
                    shadowScale:0.94  //阴影的大小
                }

这样就实现了3D方块的翻页效果

点击进入swiper强化教程

时间: 07-03

swiper的基础使用(十六)的相关文章

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

ASP.NET Core 2.2 基础知识(十六) SignalR 概述

原文:ASP.NET Core 2.2 基础知识(十六) SignalR 概述 我一直觉得学习的最好方法就是先让程序能够正常运行,才去学习他的原理,剖析他的细节. 就好像这个图: 所以,我们先跟着官方文档,创建一个 SignalR 应用: https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?view=aspnetcore-2.2&tabs=visual-studio 这个例子一共涉及到下面几个步骤: 自定义中心 ChatH

linux基础-第十六单元 yum管理RPM包

第十六单元 yum管理RPM包 yum的功能 本地yum配置 光盘挂载和镜像挂载 本地yum配置 网络yum配置 网络yum配置 Yum命令的使用 使用yum安装软件 使用yum删除软件 安装组件 删除组件 清除缓存 查询 课后作业 [本节内容]1. yum的功能:yum是Yellow dog Updater, Modified的缩写,目的就是为了解决RPM的依赖关系的问题,方便使用者进行软件的安装.升级等等工作.2. 掌握光盘挂载和镜像挂载a) 光盘挂载mount /dev/sr0 挂载点或者

swiper的基础使用(六)

这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显.首先还是要按照第一节的内容完成一个基础的swiper页面. <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div> <div class="swiper-slide&

python 全栈 python基础 (十六)面向对象编程的 继承 多态与多态性 封装

一.继承顺序: 多继承情况下,有两种方式:深度优先和广度优先 1.py3/py2 新式类的继承:在查找属性时遵循:广度优先 继承顺序是多条分支,按照从左往右的顺序,进行一步一步查找,一个分支走完会走另一个分支(若多条分支汇总一个头,除最后一条分支能走到头,其他的都走到次之位置停止,进行下一条分支的查找),直到查找到头为止. 可以利用 类名.__mro__ 的方法查看类之间的继承关系(经典类没有这种方法) 1 class B(object): 2 def func(self): 3 print('

Android学习之基础知识十六 — Android开发高级技巧的掌握

一.全局获取Context的技巧 前面我们很多地方都使用到了Context,弹出Toast的时候.启动活动的时候.发送广播的时候.操作数据库的时候.使用通知的时候等等.或许目前来说我们并没有为得不到Context而发愁,因为我们很多地方都是在活动中进行的,而活动本身就是一个Context对象,但是,当应用程序的架构逐渐开始复杂起来的时候,很多的逻辑代码都将脱离Activity类,但此时又恰恰需要使用Context,特许这个时候就会感到有些伤脑筋了. 举个例子,在前面网络编程的最佳实践中,我们编写

【基础知识十六】强化学习

一.任务与奖赏 我们执行某个操作a时,仅能得到一个当前的反馈r(可以假设服从某种分布),这个过程抽象出来就是“强化学习”. 强化学习任务通常用马尔可夫决策过程MDP来描述: 强化学习任务的四要素 E = <X, A, P, R> E:机器处于的环境 X:状态空间 A:动作空间 P:状态转移概率 R:奖赏函数 学习目的: “策略”:机器要做的是不断尝试学得一个“策略” π,根据状态x就能得到要执行的动作 a = π(x) 策略的评价: 长期累积奖赏,常用的有“T步累积奖赏” 强化学习与监督学习的

集合框架、泛型、迭代(java基础知识十六)

1.ArrayList存储自定义对象并遍历 此类的 iterator 和 listIterator 方法返回的迭代器是快速失败的:在创建迭代器之后,除非通过迭代器自身的 remove 或 add 方法从结构上对列表进行修改,否则在任何时间以任何方式对列表进行修改,迭代器都会抛出 ConcurrentModificationException.* ArrayList存储自定义对象并遍历 ArrayList<Person> list = new ArrayList<>(); list.

JavaEE基础(十六)/集合

1.集合框架(去除ArrayList中重复字符串元素方式) A:案例演示 需求:ArrayList去除集合中字符串的重复值(字符串的内容相同) 思路:创建新集合方式 /** * A:案例演示 * 需求:ArrayList去除集合中字符串的重复值(字符串的内容相同) * 思路:创建新集合方式 */ public static void main(String[] args) { ArrayList list = new ArrayList(); list.add("a"); list.a

java基础(十六)集合(三)

这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是比较清晰的!如果你有需要可以在评论中留下您的邮箱我看到一定会免费发给你的!感谢这个平台让我们大家共同进步吧!! 记住 程序员是无私的!!! 也非常欢迎到我的博客内观看 博客地址:http://www.cnblogs.com/duscl/ /* 1:登录注册案例(理解) 2:Set集合(理解) (1)