这节课我们介绍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代码当中进行初始化并且添加属性
通过js当中添加的属性我们可以发现，只是将分组属性的值变为了‘auto’，然后开启slide页面居中的属性就可以了，怎么样，是不是非常简单呢？
以上就是swiper的基础使用（七）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
