Utilisation de base du swiper (17)-tutoriel HTML-php.cn

Utilisation de base du swiper (17)

黄舟

Libérer： 2017-01-20 15:44:24

original

1604 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 (m.sbmmt.com) !