swiper的基础使用(十四)
2016-07-05 00:00
344 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程swiper教程。
这次内容我们介绍如何在swiper页面当中开启循环模式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。
然后到js当中进行页面的初始化,再加上我们的循环属性(loop:true).
完成之后我们就可以一直进行翻页了,能玩三天三夜,还不会累!
点击进入swiper强化教程:http://h5edu.cn/index.php?c=index&a=step&lessonid=893
这次内容我们介绍如何在swiper页面当中开启循环模式。
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。
<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> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
然后到js当中进行页面的初始化,再加上我们的循环属性(loop:true).
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, nextButton:'.swiper-button-next', prevButton:'.swiper-button-prev', slidesPerView:1, spaceBetween:30, loop:true //开启循环属性 });
完成之后我们就可以一直进行翻页了,能玩三天三夜,还不会累!
点击进入swiper强化教程:http://h5edu.cn/index.php?c=index&a=step&lessonid=893
相关文章推荐
- 天禾云,校园云盘内部结构安全性/权限设置的剖析
- 虚拟主机通过修改.htaccess将入口重定向到public文件夹
- 网易云音乐MAC在线播放缓存地址
- java序列化流程
- angular经验
- Presto客户端跟服务端交互
- UIScrollView截取内部内容存入相册
- NGINX_ERR_INCOMPLETE_CHUNKED_ENCODING
- PHP开发中涉及到emoji表情的几种处理方法
- Sublime3 配置html
- linux学习(零) 硬件知识补充
- device eth0 does not seem to be present, delaying
- 实现自己的控制层do-c (仿Struts2和SpringMVC)(三)
- 实现自己的控制层do-c (仿Struts2和SpringMVC)(四)
- 实现自己的控制层do-c (仿Struts2和SpringMVC)(五)
- angular的$watch 和$timeout
- 代码中为什么分为代码段、数据段?这和内存访问机制中的段是一回事吗(1)
- Linux内存分布
- Openstack无法删除云硬盘
- Linux如何配置ip并开启