文档章节

swiper的基础使用(二)

zhanyingwang
 zhanyingwang
发布于 2016/06/17 10:14
字数 281
阅读 35
收藏 0
点赞 0
评论 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

Swiper插件分页器使用

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

大眼睛猫 ⋅ 2017/11/15 ⋅ 0

swiper.js-全屏动画切换效果实现

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

透笔度 ⋅ 2016/02/15 ⋅ 0

AngularJS 中使用Swiper制作滚动图不能滑动

Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,受到很多前端开发者的欢迎。 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide类,在swipe...

冷冷gg ⋅ 2016/11/15 ⋅ 0

关于VueAwesomeSwiper在VUE中的使用以及遇到的一些问题

Vue-Awesome-Swiper 轮播图插件,可以同时支持Vue.js(1.X ~ 2.X),兼顾PC和移动端,随着vue的广泛使用,其中插件swiper也算是使用的比较频繁的插件,现在分享一下使用方法以及开发中会遇到...

littleyu ⋅ 01/11 ⋅ 0

Swiper v4.0.1 发布,支持硬件加速的触摸滑动库

Swiper v4.0.1 已发布,Swiper 是移动端使用的触摸滑动的一个开源库,可应用于移动网站、Web App、Native APP 和混合类 APP,支持硬件加速。 Swiper 专为 iOS 设计,但也支持 Android、Windo...

王练 ⋅ 2017/10/12 ⋅ 1

商品促销倒计时效果实现

效果图展示 这里写图片描述 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击状态 轮播图的实现 swiper插件:开源,免费,强大的移动端触摸...

云焱 ⋅ 2017/12/03 ⋅ 0

关于setInterval与setTimeout作用域问题

最近在模仿swiper鼓捣一个轮播图插件时,碰到了setInterval的作用域问题,轮播的方法写在一个对象里,但是setInterval执行这个方法后,在方法体内无法访问这个对象的属性了,业务逻辑代码如下...

爱coding的husky ⋅ 2017/11/03 ⋅ 0

H5页面中的视频轮播(类似于banner轮播图效果)

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

guoxiaodi001 ⋅ 2017/05/12 ⋅ 0

编写第二个页面:新闻阅读列表页面

笔记内容:编写第二个页面:新闻阅读列表页面笔记日期:2018-01-06 使用Swiper组件构建轮播图 关于Swiper组件的官方描述文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper....

ZeroOne01 ⋅ 01/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

来自一个优秀Java工程师的简历

写在前面: 鉴于前几天的一份前端简历,虽然带着很多不看好的声音,但却帮助了很多正在求职路上的人,不管评论怎么说,我还是决定要贴出一份后端的简历。 XXX ID:357912485 目前正在找工作 ...

颖伙虫 ⋅ 25分钟前 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部