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

Utilisation de base du swiper (16)

黄舟
Libérer: 2017-01-20 15:42:52
original
1482 Les gens l'ont consulté

Dans ce contenu, nous présenterons l'animation de changement de page sur l'effet de bloc 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>
            <div class="swiper-pagination"></div>
        </div>
Copier après la connexion

Ensuite, initialisez et ajoutez une animation de tournage de page en js. C'est toujours un attribut, mais c'est un peu différent.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                grabCursor:true,
                effect:&#39;cube&#39;,  //翻页效果:方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });
Copier après la connexion

En plus des attributs directement ajoutés, notre animation de tournage de page a également ses propres attributs, qui sont ici

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

C'est comme ça obtenu L'effet de rotation de page des carrés 3D

Ce qui précède est le contenu de l'utilisation de base du swiper (16). 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