swiper的基础使用(七)
2016-06-23 10:27
393 查看
本文为H5EDU机构官方的HTML5培训教程 swiper教程
这节课我们介绍swiper页面的自动分组+居中的内容。
第一步还是创建一个基础的swiper页面
之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果)
点击进入swiper强化教程
这节课我们介绍swiper页面的自动分组+居中的内容。
第一步还是创建一个基础的swiper页面
<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 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>
之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果)
body{ margin:0; padding:0; background:#F2F2F2; } .swiper-container{ width:100%; height:300px; margin:20px auto; } .swiper-slide{ width:60%; font-size:18px; text-align:center; justify-content:center; align-items:center; display:flex; background:#fff; } .swiper-slide:nth-child(2n){ //设定页面不同的宽度 width:40%; } .swiper-slide:nth-child(3n){ width:20%; }之后再去js代码当中进行初始化并且添加属性
<script> var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, slidesPerView:'auto', spaceBetween:30, centeredSlides:true }); </script>通过js当中添加的属性我们可以发现,只是将分组属性的值变为了‘auto’,然后开启slide页面居中的属性就可以了,怎么样,是不是非常简单呢?
点击进入swiper强化教程
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能