Utilisation de base du swiper (18)

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('.swiper-container',{
                pagination:'.swiper-pagination',
                nextButton:'.swiper-button-next',
                prevButton:'.swiper-button-prev',
                grabCursor:true,   //抓手光标开启
                effect:'flip'   //翻转效果：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) !