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

このレッスンでは、スワイパーページの複数行表示を紹介します。

最初のステップは、基本的なスワイパー ページを作成することです。ただし、今回はさらに多くのスライドを作成します。

<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 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 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=&#39;swiper-pagination&#39;></div>
        </div>

その後、js でスワイパーを初期化します

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
               pagination:&#39;.swiper-pagination&#39;,
               paginationClickable:true,
               spaceBetween:10,
               slidesPerView:3,
               slidesPerColumn:3   //将swiper页面多行显示为：3行
            });
        </script>

今回は、初期化で属性を追加する実装スタイルがまだ変わっていないことがわかります--------slidePerColumn
。一般 この属性は、グループ表示と組み合わせて使用​​されます。ページの間に隙間を追加することも最適です

上記はスワイパーの基本的な使い方 (9) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。