Grundlegende Verwendung von Swiper (7)

In dieser Lektion stellen wir die automatische Gruppierung und den zentrierten Inhalt von Swiper-Seiten vor.

Der erste Schritt besteht darin, eine einfache Swiper-Seite zu 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>
            <div class="swiper-pagination"></div>
        </div>

Danach stellen wir mit dem Selektor die Breite der Seite auf eine andere ein (damit wir zuschauen können). der automatische Gruppierungseffekt)

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%;
            }

Gehen Sie dann zum js-Code, um Attribute zu initialisieren und hinzuzufügen

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

Wir können dies anhand der Attribute herausfinden In js hinzugefügt, ändern Sie einfach den Wert des Gruppierungsattributs in „auto“ und aktivieren Sie dann das Attribut zentriert auf der Folienseite. Ist das nicht sehr einfach?

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