博客> swiper的基础使用(七)
swiper的基础使用(七)
2019-08-11 00:13 评论:0 阅读:738 zhanying
html5 swiper

本文为H5EDU机构官方的HTML5培训教程 swiper教程 这节课我们介绍swiper页面的自动分组+居中的内容。

第一步还是创建一个基础的swiper页面

第一页
第二页
第三页
第四页
第五页
第六页
第七页
第八页
第九页
第十页

之后我们用选择器来将页面的宽度设定为不相同的(便于我们观看自动分组的效果) 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代码当中进行初始化并且添加属性 [removed] var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', paginationClickable:true, slidesPerView:'auto', spaceBetween:30, centeredSlides:true }); [removed] 通过js当中添加的属性我们可以发现,只是将分组属性的值变为了‘auto’,然后开启slide页面居中的属性就可以了,怎么样,是不是非常简单呢? 点击进入swiper强化教程:http://h5edu.cn/index.php?c=index&a=step&lessonid=893

收藏
0
sina weixin mail 回到顶部