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

このセクションでは、スワイパーページをグループで表示する方法について説明します。
1 つの画面に 1 つのページだけを表示することは、開発ニーズを満たさない場合があります。Swiper パッケージでは、1 つの画面にページのグループを表示するメソッドが必要です。スワイパー ページの初期化に属性を追加するだけです。

最初のステップは、基本的なスワイパー ページを作成することです。 & lt; div class = "swiper-container" & gt;

<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>

次に、効果をよりよく確認するために、JS でページに属性を追加します。

ページにスライドギャップを追加しました。

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                slidesPerView:3,   //页面分组显示，这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

もちろん、フレーム ファイルを参照することを忘れないでください。そのため、ページを実行すると、現在の画面にグループが表示されることがわかります。

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