Grundlegende Verwendung von Swiper (6)

In diesem Abschnitt wird hauptsächlich das Zentrierungsattribut in Swiper vorgestellt.

Diese Zentrierung bezieht sich auf die Zentrierung der aktuellen Seite, die wir durchsuchen. Der Effekt ist deutlicher, wenn wir die Gruppenanzeige verwenden.
Zunächst müssen Sie eine einfache Swiper-Seite entsprechend dem Inhalt des ersten Abschnitts ausfüllen. 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 class="swiper-slide">第十一页</div>
                <div class="swiper-slide">第十二页</div>
                <div class="swiper-slide">第十三页</div>
            </div>
        </div>

Um den Effekt deutlicher zu machen, fügen wir der Seite eine Gruppenanzeige und eine Seitenlücke hinzu Während des Tests können wir die Gruppenanzeige auch löschen oder mit Anmerkungen versehen, um den Seiteneffekt zu sehen.

<script>            
var swipre = new Swiper(&#39;.swiper-container&#39;,{                
slidesPerView:4,   //分组显示                
spaceBetween:30    //页面间隙                
centeredSlides:true  //页面居中            
});        
</script>

Auf diese Weise wird unserem Projekt das Attribut der Seitenzentrierung hinzugefügt

Das Obige ist die grundlegende Verwendung von Swiper (6). Weitere verwandte Inhalte finden Sie hier Achten Sie auf die chinesische PHP-Website (www.php.cn)!