Swiper
ZhangXD_BLOG
坚持,就会有收获。
展开
-
Swiper的使用
swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。以及方法和回调函数。我们先实现一个基本的swiper页面,只有翻页功能的页面。首先我们要先引用框架文件。swiper.css 和 swiper.js<link rel="stylesheet" href="swiper.css...原创 2016-07-04 21:13:14 · 1193 阅读 · 0 评论 -
swiper-翻页效果---3D翻转效果
本次内容我们继续介绍swiper当中的翻页效果---3D翻转效果 首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class...原创 2016-07-04 21:27:15 · 5267 阅读 · 0 评论 -
swiper-页面的翻页动画--3D方块效果
这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。 首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。 <div class="swiper-container"> <div class="swiper-wrapper"> <div clas...原创 2016-07-04 21:25:40 · 1837 阅读 · 1 评论 -
swiper-页面的翻页动画--渐变效果
这次内容我们介绍在swiper页面的翻页动画--渐变效果既然有翻页,那么肯定少不了翻页效果,这个功能在swiper当中也给我们进行了包装,所以我们在使用的时候变得非常的方便。首先进行基本的布局以及CSS样式的设置。<div class="swiper-container"> <div class="swiper-wrapper"> ...原创 2016-07-04 21:24:57 · 5050 阅读 · 0 评论 -
Swiper-页面当中开启循环模式
这次内容我们介绍如何在swiper页面当中开启循环模式。首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class...原创 2016-07-04 21:24:19 · 1391 阅读 · 0 评论 -
swiper-添加控制按钮(可以控制翻页上一页和下一页)
本次内容我们介绍在swiper页面当中添加控制按钮(可以控制翻页上一页和下一页)。 首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div(.swiper-button-next/prev)加到外部容器(.swiper-container)当中. <div class="swiper-container"> <div class="s...原创 2016-07-04 21:23:35 · 13987 阅读 · 0 评论 -
swiper-如何将导航变为滚动条样式
本节内容介绍swiper当中如何将导航变为滚动条样式。 首先我们搭建一个swiper页面的基本布局。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<原创 2016-07-04 21:22:50 · 2856 阅读 · 0 评论 -
swiper-抓手光标,即改变光标在swiper页面当中的样式
本次章节呢,我们来介绍swiper当中的抓手光标,即改变我们光标在swiper页面当中的样式。 第一步我们还是搭建一个基础的swiper页面布局。<body> <div class="swiper-container"> <div class="swiper-wrapper"> ...原创 2016-07-04 21:22:12 · 1531 阅读 · 0 评论 -
Swiper-当中的swiper嵌套
这节课我们介绍swiper当中的swiper嵌套。 这次第一步有些不一样,虽然同样是要搭建swiper页面,但是我们在一个swiper页面当中的slide里面嵌套了一个swiper在里面。<div class="swiper-container swiper-container-h"> <div class="swiper-wrapper"> ...原创 2016-07-04 21:21:14 · 5708 阅读 · 0 评论 -
swiper-页面的多行显示
这节课我们介绍swiper页面的多行显示。 第一步,我们还是要创建一个swiper的基础页面。不过这次我们要多创建一些slide。<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"&g..原创 2016-07-04 21:20:33 · 2932 阅读 · 0 评论 -
swiper-页面的free模式。
这节课我们介绍swiper页面的free模式。 第一步,我们还是要创建一个swiper的基础页面。<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<i原创 2016-07-04 21:19:51 · 2901 阅读 · 0 评论 -
swiper-页面的自动分组+居中的内容。
这节课我们介绍swiper页面的自动分组+居中的内容。 第一步还是创建一个基础的swiper页面<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">第一页</div&a原创 2016-07-04 21:18:34 · 4860 阅读 · 0 评论 -
swiper-居中属性
这一节主要介绍swiper当中的居中属性。 这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。首先还是要按照第一节的内容完成一个基础的swiper页面。<div class="swiper-container"> <div class="swiper-wrapper"> &...原创 2016-07-04 21:17:41 · 10687 阅读 · 0 评论 -
Swiper-如何让swiper页面分组显示
本节讲解如何让swiper页面分组显示。有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。 第一步我们依然是编写一个基础的swiper页面。<div class="swiper-container"> <div class="sw...原创 2016-07-04 21:16:50 · 7354 阅读 · 0 评论 -
Swiper-页面布置
首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 <!doctype html><html> <head> <title>在slide之间加上间隙</title> <meta charset="utf-8"&原创 2016-07-04 21:16:02 · 1539 阅读 · 0 评论 -
Swiper-页面垂直滚动样式
首先按照第一节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。在外部容器当中加入翻页导航。<div class="swiper-container"><div class="swiper-wrapper">...原创 2016-07-04 21:15:05 · 3263 阅读 · 0 评论 -
Swiper-添加了翻页导航功能组件
上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。 首先按照上节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。<div class="swiper-container">&...原创 2016-07-04 21:14:24 · 1167 阅读 · 0 评论 -
Swiper-页面当中添加键盘控制翻页的功能
这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU1</d原创 2016-07-04 21:29:09 · 1699 阅读 · 0 评论