文档章节

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_
2018/05/30
0
0
vue-awesome-swiper - 基于vue实现h5滑动翻页效果

说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着。 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(...

郭菊锋
2018/07/11
0
0
微信小程序swiper高度自适应,swiper的子元素高度不固定

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

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

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

nicomama_fe
2018/11/07
0
0
移动端触摸滑动插件Swiper使用指南

Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备,帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏...

zhangyin88
2018/07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

给windows server中的“未识别的网络”或“无法识别的网络”设置网络位置类型

在windows server中,如果网络没有被正确的识别,那么就需要手工设置一下网络位置类型。 将“公用网络”指定设置为“专用网络“ 【控制面板】--【系统和安全】--【管理工具】--【本地安全策略...

gugudu
今天
1
0
阿里强制要求的21条Java开发规范,可以避免很多坑

1. 【强制】避免通过一个类的对象引用访问此类的静态变量或静态方法,无谓增加编译器解析成本,直接用类名来访问即可。 2. 【强制】所有的覆写方法,必须加@Override注解。 说明:getObject...

天王盖地虎626
今天
8
0
oracle dg 备库未设置convert参数导致ORA-01111,ORA-01110

查看trace 文件: MRP0: Background Managed Standby Recovery process started (amls) started logmerger process Sun Jan 20 07:55:53 2019 Managed Standby Recovery starting Real Time ......

hnairdb
今天
2
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linux-tao
今天
3
0
乱入Linux界的我是如何学习的

欢迎来到建哥学Linux,咳!咳!咳!开个玩笑哈,我是一个IT男,IT界的入门选手,正在学习Linux。 在之前,一直想进军IT界,学习IT技术,但是苦于没有人指导,也不知道学什么,最开始我自己在...

linuxprobe16
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部