文档章节

swiper的基础使用(二)

zhanyingwang
 zhanyingwang
发布于 2016/06/17 10:14
字数 281
阅读 35
收藏 0

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

上上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。
 
首先按照上节课的内容,将一个基本的swiper页面实现。
然后在初始化的js代码当中添加属性。
 
当然事先不要忘记引用下载好的框架文件。
我们先添加翻页导航的功能组件。


在外部容器当中加入翻页导航。
<div class="swiper-container">
<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>
<div class="swiper-pagination"></div>  //翻页导航的div
</div>
<script>
var swiper = new Swiper('.swiper-container',{
pagination:'.swiper-pagination',   //绑定翻页导航
paginationClickable:true        //设定可以点击翻页导航进行翻页
});
</script>


这样就在页面当中添加了一个翻页导航出来。

 

点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html

 

 

© 著作权归作者所有

共有 人打赏支持
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的子元素高度不固定

微信小程序swiper高度自适应,swiper的子元素高度不固定 小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如...

清风白水
08/08
0
0
前端 H5 横屏 独特处理方案详解

前言 随着公司知识付费业务的发展,产品发现横屏展示内容的效果和体验都要比竖屏要来的好。我也感觉确实是这样的~。刚接到这个需求的时候,稍微想了一下,横屏这还不简单直接把整个页面旋转...

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

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

透笔度
2016/02/15
2.8K
0

没有更多内容

加载失败,请刷新页面

加载更多

探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
5分钟前
0
0
使用linux将64G的SDCARD格式化为FAT32

一、命令如下: sudo fdisk -lsudo mkfs.vfat /dev/sda -Isudo fdisk /dev/sda Welcome to fdisk (util-linux 2.29.2). Changes will remain in memory only, until you decide to wri......

mbzhong
43分钟前
4
0
深入理解Plasma(四):Plasma Cash

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章主要介绍在 Plasma 框架下的项目 Plasma Cash。 深入理解Plasma(1):...

HiBlock
昨天
1
0
命令参数的三大风格:Posix、BSD、GNU

今天读到命令行中参数的风格有三大类,即Unix/Posix、BSD、GNU。分别有以下特征: Unix/Posix风格,即命令后的参数,可以分组,便必须以连字符开头,如ps -aux。 BSD风格,即命令后的参数,可...

大别阿郎
昨天
2
0
PHP生成图片验证码

PHP生成图片验证码 /** * PHP生成图片验证码 * Class VerifyImage */class VerifyImage{ // 生成随机字串 private $verifyCode; // 图片对象 private $image; /**...

DrChenXX
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部