swiper基础使用(八)
本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的free模式。 第一步,我们还是要创建一个swiper的基础页面。 H5EDU 1 H5EDU 2 H5EDU 3 H5EDU 4 H5EDU 5 H5EDU 6 H5EDU 7 H5EDU 8 H5EDU 9 H5EDU 10 然后就要在初始化当中添加我们的free模式的属性了 [removed] var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, slidesPer...【详细】
html5 swiper
2016年06月24日 赞:0 评论:0 阅读:667
swiper的基础使用(七)
本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的自动分组+居中的内容。 第一步还是创建一个基础的swiper页面 第一页 第二页 第三页 第四页 第五页 第六页 第七页 第八页 第九页 第十页 之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果) body{ margin:0; padding:0; background:#F2F2F2; } .swiper-c...【详细】
html5 swiper
2016年06月23日 赞:0 评论:0 阅读:742
swiper的基础使用(六)
这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。 首先还是要按照第一节的内容完成一个基础的swiper页面。 第一页 第二页 第三页 第四页 第五页 第六页 第七页 第八页 第九页 第十页 第十一页 第十二页 第十三页 然后进行页面的初始化,为了使效果更加明显,我们将页面加上分组显示和页面...【详细】
html5 swiper
2016年06月22日 赞:0 评论:0 阅读:691
swiper的基础使用(五)
本节讲解如何让swiper页面分组显示。 有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。 第一步我们依然是编写一个基础的swiper页面。 第一页 第二页 第三页 第四页 第五页 第六页 第七页 第八页 第九页 第十页 然后在js...【详细】
html5 swiper
2016年06月21日 赞:0 评论:0 阅读:646
swiper的基础使用(四)
当然事先不要忘记引用下载好的框架文件。 这一章我们添加了设置容器的宽、高 <!doctype html> <html> <head> <title>在slide之间加上间隙</title> <meta charset="utf-8"> <link rel="stylesheet" href="swiper.min.css"> <style> body{ margin:0; padding:0; } .swiper-container{ width:500px; height:300px; margin:20px auto; } .swiper-slide{ tex...【详细】
html5 swiper
2016年06月20日 赞:0 评论:0 阅读:624
swiper的基础使用(三)
首先按照第一节课的内容,将一个基本的swiper页面实现。 然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。 我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。 在外部容器当中加入翻页导航。 页面内容 页面内容 页面内容 页面内容 页面内容 //翻页导航的div [remov...【详细】
html5 swiper
2016年06月17日 赞:0 评论:0 阅读:745
swiper的使用(一)
swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。 swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。 以及方法和回调函数。 我们先实现一个基本的swiper页面,只有翻页功能的页面。 首先我们要先引用框架文件。swiper.css 和 swiper.js ​<link rel="stylesheet" href="swiper.css&quo...【详细】
html5 swiper
2016年06月16日 赞:0 评论:0 阅读:751
swiper的使用(一)
swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。 swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。 以及方法和回调函数。 我们先实现一个基本的swiper页面,只有翻页功能的页面。 首先我们要先引用框架文件。swiper.css 和 swiper.js ​<link rel="stylesheet" href="swiper.css&quo...【详细】
html5 swiper
2016年06月16日 赞:0 评论:0 阅读:700
swiper的基础使用(二)
上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。 首先按照上节课的内容,将一个基本的swiper页面实现。 然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。 我们先添加翻页导航的功能组件。 在外部容器当中加入翻页导航。 页面内容...【详细】
html5 swiper
2016年06月15日 赞:0 评论:0 阅读:696
共29个 共2页 12
sina weixin mail 回到顶部