Grundlegende Verwendung von Swiper (16)

In diesem Inhalt stellen wir die Umblätteranimation für den Swiper-Seiten-3D-Blockeffekt vor.

Erstellen Sie zunächst die Swiper-Seite und legen Sie den CSS-Stil fest. Um den Effekt zu sehen, fügt dieses Kapitel der Folie noch ein Hintergrundbild hinzu.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="logo.png"></div>
                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>
                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

Dann initialisieren Sie die Umblätteranimation und fügen Sie sie in js hinzu. Es ist immer noch ein Attribut, aber es ist ein wenig anders.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                effect:'cube',  //翻页效果：方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

Zusätzlich zu den direkt hinzugefügten Attributen verfügt unsere Umblätteranimation auch über eigene Attribute, die hier aufgeführt sind

cube:{
                    shadow:true,   //阴影效果，如果设置为false下面的就不用
                    slideShadows:true,  //页面阴影效果
                    shadowOffset:20,  //阴影的偏移值
                    shadowScale:0.94  //阴影的大小
                }

So ist es Der Umblättereffekt von 3D-Quadraten wird erreicht

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