swiper的基础教程(十二)
2016-07-01 00:00
267 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程。
本节内容介绍swiper当中如何将导航变为滚动条样式。
首先我们搭建一个swiper页面的基本布局。
然后到JS部分添加初始化代码。
可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar,然后在初始化当中绑定导航。就可以实现了。当然,可以关闭导航条的隐藏效果
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
本节内容介绍swiper当中如何将导航变为滚动条样式。
首先我们搭建一个swiper页面的基本布局。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<img src="logo.png"></div> <div class="swiper-slide">H5EDU 2<img src="logo.png"></div> <div class="swiper-slide">H5EDU 3<img src="logo.png"></div> <div class="swiper-slide">H5EDU 4<img src="logo.png"></div> <div class="swiper-slide">H5EDU 5<img src="logo.png"></div> <div class="swiper-slide">H5EDU 6<img src="logo.png"></div> <div class="swiper-slide">H5EDU 7<img src="logo.png"></div> <div class="swiper-slide">H5EDU 8<img src="logo.png"></div> <div class="swiper-slide">H5EDU 9<img src="logo.png"></div> </div> <div class="swiper-scrollbar"></div> </div>
然后到JS部分添加初始化代码。
var swiper = new Swiper('.swiper-container',{ spaceBetween:30, grabCursor:true, slidesPerView:3, centeredSlides:true, scrollbar:'.swiper-scrollbar', //绑定分页导航 scrollbarHide:true //开启导航在不活动时的隐藏 });
可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar,然后在初始化当中绑定导航。就可以实现了。当然,可以关闭导航条的隐藏效果
点击进入swiper强化教程:http://h5edu.cn/htm/step/h5edu_893.html
相关文章推荐
- JAVA学习笔记(3-2-函数与重载)
- phpStorm打开提示 failed to create JVM 的解决办法
- 单例模式的反序列化总结
- FTP工作模式分析
- Django数据库读取出下拉框的数据源
- 浅谈开源大数据平台的演变
- 大数据环境下互联网行业数据仓库/数据平台的架构之漫谈
- MySQL数据库PDO教程
- activiti的注意点
- Activiti5工作流实战-5
- Activiti工作流实战-3
- Activiti5工作流实战-4
- 从UIViewController跳转到UITabBarController
- SVN简介
- Java随笔--分布式
- 项目启动后,屏幕显示不正常,顶部和底部都黑了一条
- angular 深入浅出
- maven+myEclipse+ssm的搭建
- jquery tips
- EasyUi combobox-checkbox 带全选功能