Grundlegende Verwendung von Swiper (17)

In diesem Inhalt stellen wir die Umblätteranimation für den Swiper-Seiten-3D-Overlay-Flusseffekt 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 class="swiper-slide"><img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

Fügen Sie dann Attribute hinzu und legen Sie Animationen auf die gleiche Weise wie bei unserem vorherigen 3D-Blockeffekt fest.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                centeredSlides:true,
                slidesPerView:'auto',
                effect:'coverflow', //动画效果：3D覆盖流效果
                coverflow:{
                    rotate:50,
                    stretch:0,
                    depth:100,
                    modifier:1,
                    slideShadows:true
                }
            });

Was stellen wir in unseren Animationseinstellungen ein?

coverflow:{
                    rotate:50,  //旋转的角度
                    stretch:0,  //拉伸
                    depth:100,  //深度
                    modifier:1, //修正值（该值越大前面的效果越明显）
                    slideShadows:true  //页面阴影效果
                }

Am besten verwenden Sie unsere Animationseffekte zusammen mit der Gruppenanzeige. Der Effekt ist nicht gut, wenn er alleine verwendet wird.

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