文档章节

swiper的使用(一)

zhanyingwang
 zhanyingwang
发布于 2016/06/16 10:18
字数 252
阅读 28
收藏 0

这里是HTML5培训 swiper系列教程001:swiper教程

swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。

swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。

以及方法和回调函数。

我们先实现一个基本的swiper页面,只有翻页功能的页面。


首先我们要先引用框架文件。swiper.css 和 swiper.js

​<link rel="stylesheet" href="swiper.css">

<script src="swiper.js"></script>​

再建立一个外部容器。swiper-cotainer

<div class="swiper-container">​

然后在外部容器当中添加一个内部容器。swiper-wrapper

<div class="swiper-wrapper">​

在内部容器当中添加每一个翻页页面​

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

<div class="swiper-slide>页面内容</div>

</div>

</div>​

http://www.h5edu.cn/index.php?c=index&a=step&lessonid=893

© 著作权归作者所有

共有 人打赏支持
zhanyingwang
粉丝 4
博文 66
码字总数 28707
作品 0
东城
私信 提问
8.轮播图组件及vue-awesome-swiper的引入(手把手教你用vue+node+mongodb搭建一个小商城)

GitHub:https://github.com/Ewall1106/mall 一、新建home.vue 1、上篇我们为了便于展示,把头部组件放在了页面,现在我们删掉里面的头部组件然后我们在view文件里面新建一个页面,然后把头部...

Ewall_
05/30
0
0
vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着。 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(...

郭菊锋
07/11
0
0
移动端触摸滑动插件Swiper使用指南

Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备,帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏...

zhangyin88
07/16
0
0
swiper.js-全屏动画切换效果实现

针对swiper.js的全屏动画切换,我们已经简单分析和介绍过一次: http://my.oschina.net/u/2352644/blog/487902 这个里面非常简单的分析了如何加入我们的动画效果,swiper现在已经出现了3.0版...

透笔度
2016/02/15
2.8K
0
Swiper插件分页器使用

引入swiper.min.css 引入query.min.js 和swiper.min.js 分页器以及轮播的一般样式引用

大眼睛猫
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0
技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部