Utilisation de base du swiper (16)

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>

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('.swiper-container',{
                pagination:'.swiper-pagination',
                grabCursor:true,
                effect:'cube',  //翻页效果：方块
                cube:{
                    shadow:true,
                    slideShadows:true,
                    shadowOffset:20,
                    shadowScale:0.94
                }
            });

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  //阴影的大小
                }

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