swiper的基础使用（七）

本文为H5EDU机构官方的HTML5培训教程swiper教程 这节课我们介绍swiper页面的自动分组+居中的内容。 第一步还是创建一个基础的swiper页面 <div class="swiper-

本文为H5EDU机构官方的HTML5培训教程 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强化教程：http://h5edu.cn/index.php?c=index&a=step&lessonid=893