Maison > interface Web > tutoriel HTML > Utilisation de base du swiper (17)

Utilisation de base du swiper (17)

黄舟
Libérer: 2017-01-20 15:44:24
original
1599 Les gens l'ont consulté

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>
Copier après la connexion

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(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                grabCursor:true,
                centeredSlides:true,
                slidesPerView:&#39;auto&#39;,
                effect:&#39;coverflow&#39;, //动画效果:3D覆盖流效果
                coverflow:{
                    rotate:50,
                    stretch:0,
                    depth:100,
                    modifier:1,
                    slideShadows:true
                }
            });
Copier après la connexion

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

coverflow:{
                    rotate:50,  //旋转的角度
                    stretch:0,  //拉伸
                    depth:100,  //深度
                    modifier:1, //修正值(该值越大前面的效果越明显)
                    slideShadows:true  //页面阴影效果
                }
Copier après la connexion

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


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal