Utilisation de base du swiper (17)

Dans ce contenu, nous présenterons l'animation de changement de page sur l'effet de flux de superposition 3D swiper page.

Construisez d'abord la page swiper et définissez le style CSS Afin de voir l'effet, ce chapitre ajoute toujours une image d'arrière-plan à la diapositive.

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

Ajoutez ensuite des attributs et définissez des animations de la même manière que notre précédent effet de bloc 3D.

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

Que définissons-nous dans nos paramètres d'animation ?

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

Il est préférable d'utiliser nos effets d'animation avec l'affichage de groupe. L'effet n'est pas bon lorsqu'il est utilisé seul.

Ce qui précède est l'utilisation de base de swiper (dix-sept). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !