Grundlegende Verwendung von Swiper (5)

In diesem Abschnitt wird erläutert, wie Swiper-Seiten in Gruppen angezeigt werden.
Manchmal kann die Anzeige einer einzigen Seite auf einem Bildschirm unsere Entwicklungsanforderungen nicht erfüllen. Sie müssen nur ein Attribut zur Initialisierung der Swiper-Seite hinzufügen.

Der erste Schritt besteht darin, eine einfache Swiper-Seite zu schreiben. 18bb7614196f7baab91b92810cbd2724

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

Initialisieren Sie dann die Seite in js und fügen Sie Attribute für einen besseren Anzeigeeffekt hinzu.
Wir haben der Seite eine Folienlücke hinzugefügt.

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

Vergessen Sie natürlich nicht, unsere Rahmendatei zu zitieren. Wenn Sie also unsere Seite aufrufen, werden Sie feststellen, dass eine Gruppe unserer Seiten auf dem aktuellen Bildschirm angezeigt wird.

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