文档章节

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.js-全屏动画切换效果实现

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

透笔度
2016/02/15
2.8K
0
项目中使用vue-awesome-swiper

一.简介 Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换...

fenerchen
06/12
0
0
H5页面中的视频轮播(类似于banner轮播图效果)

先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频。 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看 提起轮播,我们...

guoxiaodi001
2017/05/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一生产与一消费:操作栈

1:创建栈代码如下 public class MyStack { private List list = new ArrayList(); synchronized public void push() { try { if (list.size() == 1) {......

起个昵称好难啊
18分钟前
1
0
vue中vuex简单实例

1.安装 npm install vuex --save 2.store.js import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {count: 900000},g......

帝子兮
25分钟前
0
0
使用Golang实现网页爬虫

使用Golang实现网页爬虫

coderminer
27分钟前
1
0
30 个免费的 Sketch 必备插件

简评:中秋三天小长假,要不要学点啥?比如简单的设计?比如用 Sketch 做个项目? Sketch 有许多值得称赞的地方,其丰富的插件就是亮点之一。Sketch 的社区有着大量免费高效的插件。今天这篇...

极光推送
39分钟前
1
0
web打印控件 LODOP的详细api

web打印控件 LODOP的详细api

wangxujun59
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部