文档章节

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
移动端触摸滑动插件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

没有更多内容

加载失败,请刷新页面

加载更多

身处小公司,如何在2年内快速突破,拿到大厂offer?|掘金技术征文

本文是我一个朋友的经历,谨以此文告诉那些向往更好的未来发展而一直努力奋斗的朋友们。不管你现在身处什么小公司,都不要气馁,机会还是有的,只要你敢于拼搏奋斗,我相信你一定可以成功的。...

SuShine
6分钟前
0
0
web应用防火墙的作用

web应用防火墙也被称为网站应用级入侵防御系统,按照一些常规的定义,WAF是指通过一些列针对HTTP/HTTPS的安全策略专门为web应用提供保护的产品。它主要用于防御针对网络应用层的攻击,像SQL...

上树的熊
8分钟前
1
0
5分钟掌握var,let和const异同

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 原文出处:https://dzone.com/articles/javascript-difference-between-var-let-and-const-...

葡萄城技术团队
10分钟前
1
0
gif工具ffmpeg 的安装

ffmpeg 是一个可以将视频生成gif 格式的图片的工具, 下面说说如何安装这个工具吧: 1、 2 3 4 5 配置环境变量:

wangyanbao
12分钟前
0
0
RocketMq在windows下安装

mqnamesrv.cmd -n localhost:9876#启动namesrvmqbroker.cmd #启动brokermqbroker.cmd -n localhost:9876 autoCreateTopicEnable=true//启动控制台java -jar rocketmq-console-ng......

王桥修道院副院长
12分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部