Maison  >  Article  >  interface Web  >  Utilisation de base du swiper (18)

Utilisation de base du swiper (18)

黄舟
黄舟original
2017-01-20 15:45:401219parcourir

Dans ce contenu, nous continuons à présenter l'effet de changement de page dans le swiper --- effet de retournement 3D

Construisez d'abord la page du swiper et définissez le style CSS Afin de voir l'effet, ce chapitre reste. ajoute 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 class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

Rendez-vous ensuite dans la partie js pour ajouter l'effet de tournage de page et l'initialiser.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                nextButton:&#39;.swiper-button-next&#39;,
                prevButton:&#39;.swiper-button-prev&#39;,
                grabCursor:true,   //抓手光标开启
                effect:&#39;flip&#39;   //翻转效果:3D翻转

Ceci complète une page avec un effet de retournement 3D

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


Déclaration:
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