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