swiper-页面的自动分组+居中的内容。

一时失言乱红尘 2022-09-23 04:00 208阅读 0赞

这节课我们介绍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页面居中的属性就可以了，怎么样，是不是非常简单呢？