スワイパーの基本的な使い方 (7)

このレッスンでは、スワイパーページのコンテンツの自動グループ化と中央揃えを紹介します。

最初のステップは、基本的なスワイパー ページを作成することです

<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 Initialize に移動し、コードに属性を追加します

<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」に変更し、中央の属性をオンにするだけであることがわかります。スライドページはどうでしょうか？

上記は swiper の基本的な使い方 (7) です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。