Grundlegende Verwendung von Swiper (9)

In dieser Lektion stellen wir die mehrzeilige Anzeige von Swiper-Seiten vor.

Der erste Schritt besteht darin, eine einfache Swiper-Seite zu erstellen. Aber dieses Mal werden wir mehr Folien erstellen.

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

Danach gehen wir zu js, um unseren Swiper zu initialisieren

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

Es ist ersichtlich, dass wir uns dieses Mal nicht viel geändert haben. Der Implementierungsstil besteht noch darin, einen hinzuzufügen Attribut während der Initialisierung. ---------slidePerColumn
Im Allgemeinen wird dieses Attribut in Kombination mit der Gruppenanzeige verwendet. Es ist auch am besten, Lücken zwischen den Seiten einzufügen

Das Obige ist die grundlegende Verwendung von Swiper (9). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). !