swiper介绍
文章平均质量分 59
花开艳丽终消散
php+mysql+nginx windows
展开
-
swiper的基础使用(十三)
本次内容我们介绍在swiper页面当中添加控制按钮(可以控制翻页上一页和下一页)。首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div(.swiper-button-next/prev)加到外部容器(.swiper-container)当中. H5EDU 1 H5E原创 2016-06-24 14:34:44 · 736 阅读 · 0 评论 -
swiper的基础使用(三)
首先按照第一节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。在外部容器当中加入翻页导航。页面内容页面内容页面内容页面内容页面内容 //翻页导航的divvar swipe原创 2016-06-20 16:29:47 · 463 阅读 · 0 评论 -
swiper的基础使用(四)
首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高(前面的也要设置,不过没有写出来) 在slide之间加上间隙 body{ margin:0;原创 2016-06-20 16:32:10 · 753 阅读 · 0 评论 -
swiper的基础使用(五)
本节讲解如何让swiper页面分组显示。有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。 第一步我们依然是编写一个基础的swiper页面。 第一页 第二页原创 2016-06-20 16:33:05 · 925 阅读 · 0 评论 -
swiper的基础使用(六)
这一节主要介绍swiper当中的居中属性。 这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。首先还是要按照第一节的内容完成一个基础的swiper页面。 第一页 第二页 第三页 第四页原创 2016-06-20 16:33:53 · 819 阅读 · 0 评论 -
swiper的基础使用(七)
这节课我们介绍swiper页面的自动分组+居中的内容。 第一步还是创建一个基础的swiper页面 第一页 第二页 第三页 第四页 第五页 第六页原创 2016-06-20 16:34:49 · 610 阅读 · 0 评论 -
swiper的基础使用(九)
第一步,我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。 第一页 第二页 第三页 第四页 第五页 第六页 第七页原创 2016-06-20 16:36:23 · 917 阅读 · 0 评论 -
swiper的基础使用(二十一)
本次内容我们介绍在swiper当中实现自动翻页功能。首先我们要做的依然是做一个swiper的基础布局并且设定CSS样式。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5ED原创 2016-07-06 14:07:36 · 703 阅读 · 0 评论 -
swiper的基础使用(十)
本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的多行显示。这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样,虽然同样是要搭建swiper页面,但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。 Horizont原创 2016-06-21 14:33:46 · 846 阅读 · 0 评论 -
swiper的基础使用(十一)
本次内容,我们来介绍swiper当中的抓手光标,即改变我们光标在swiper页面当中的样式。第一步我们还是搭建一个基础的swiper页面布局。 H5EDU 1 H5EDU 2 H5EDU 3 H5ED原创 2016-06-22 13:52:43 · 602 阅读 · 0 评论 -
swipe的基础使用(二十五)
本次文章介绍swiper当中的RTL布局。RTL布局呢,就是right to left,就是从左到右的布局。代码方面没有什么复杂的地方,还是按照原来的顺序,首先编写基础的swiper页面框架。 H5EDU 1 H5EDU 2 H5EDU 3原创 2016-07-19 09:40:27 · 2657 阅读 · 0 评论 -
swiper的基础使用(十二)
本节内容介绍swiper当中如何将导航变为滚动条样式。 首先我们搭建一个swiper页面的基本布局。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5EDU 5原创 2016-06-23 18:37:05 · 531 阅读 · 0 评论 -
swiper的基础使用(二)
上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。 首先按照上节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。页面内容页面内容页面内容页面内容页原创 2016-06-20 16:28:52 · 565 阅读 · 0 评论 -
swiper的基础使用(一)
swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。以及方法和回调函数。我们先实现一个基本的swiper页面,只有翻页功能的页面。首先我们要先引用框架文件。swiper.css 和 swiper.js再建立一个外部容器。swiper原创 2016-06-20 16:27:58 · 764 阅读 · 0 评论 -
swiper的基础使用(十五)
这次内容我们介绍如何在swiper页面的翻页动画--渐变效果既然有翻页,那么肯定少不了翻页效果,这个功能在swiper当中也给我们进行了包装,所以我们在使用的时候变得非常的方便。首先进行基本的布局以及CSS样式的设置。 第一页原创 2016-06-28 09:44:20 · 1389 阅读 · 0 评论 -
swiper的基础使用(十六)
这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。 首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。原创 2016-06-29 10:59:28 · 1134 阅读 · 0 评论 -
swiper的基础使用(二十二)
本次内容我们介绍swiper当中如何动态加载slide页面。 我们按照惯例要搭建一个基础的swiper页面并且设置CSS样式。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5ED原创 2016-07-11 16:34:52 · 977 阅读 · 0 评论 -
swiper的基础使用(十七)
这次内容我们接着介绍在swiper页面的翻页动画--3D覆盖流效果。 首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。原创 2016-06-30 14:12:27 · 774 阅读 · 0 评论 -
swipe的基础使用(二十三)
本次内容我们介绍用swiper实现缩略图的效果。首先搭建起俩个swiper页面,注意俩个swiper页面的外部容器当中的类名。 H5EDU 1 这个swiper页面为展示出的原创 2016-07-12 14:43:24 · 2648 阅读 · 3 评论 -
swiper的基础使用(十八)
本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果 首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。原创 2016-07-01 14:54:54 · 669 阅读 · 0 评论 -
swiper教程--swiper的基础使用(十九)
本文为H5EDU机构官方的HTML5培训HTML5培训教程 swiper教程。这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 H5EDU1 H5EDU2 H5EDU3原创 2016-07-04 13:51:24 · 1805 阅读 · 0 评论 -
swipe的基础使用(二十六)
本次内容我们介绍swiper当中的视差效果。首先我们按照流程先要创建好swiper的基础页面构成。 <div class="parallax-bg" style="background-image:url(4.jpg)" data-swiper-parallax="-23%">原创 2016-07-26 15:11:48 · 1212 阅读 · 1 评论 -
swipe的基础使用(二十四)
本次内容我们介绍swiper当中的散列导航。我们按照惯例先搭建swiper的基础页面。 <a href="http://www.h5edu.cn/usercode/a54111bbe7ec5fb7ebd9accb9ca140f1ef23eadb/#slide3"原创 2016-07-15 16:06:27 · 1513 阅读 · 0 评论 -
swiper的基础使用(二十)
本次内容我们介绍swiper当中添加鼠标滑轮控制页面的滚动。我们按照惯例要搭建一个基础的swiper页面并且设置CSS样式 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4原创 2016-07-05 14:11:55 · 456 阅读 · 0 评论 -
swipe的基础使用(二十七)
本次内容介绍swiper当中的自定义导航。首先还是新建一个swiper页面。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5EDU 5原创 2016-07-27 15:05:14 · 3423 阅读 · 0 评论 -
swiper的基础使用(二十八)
本次内容我们介绍swiper的分式导航,可以改变导航的样式。首先还是搭建一个基础的swiper页面。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5EDU 5原创 2016-08-01 15:49:45 · 1339 阅读 · 2 评论