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(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                slidesPerView:&#39;auto&#39;,
                spaceBetween:30,
                centeredSlides:true
            });
        </script>

透過js當中加入的屬性我們可以發現，只是將分組屬性的值變為了'auto'，然後開啟slide頁面居中的屬性就可以了，怎麼樣，是不是非常簡單呢？

以上就是swiper的基礎使用（七）的內容，更多相關內容請關注PHP中文網（www.php.cn）！