Utilisation de base du swiper (15)

Dans ce contenu, nous introduisons l'animation de changement de page sur la page swiper - l'effet de dégradé
Puisqu'il y a un changement de page, l'effet de changement de page est définitivement indispensable. Cette fonction est également packagée pour nous dans swiper, donc nous. utilisez-le, cela devient très pratique.
Définissez d’abord la mise en page de base et les paramètres de style CSS.

<div class="swiper-container">
        <div class="swiper-wrapper">
            <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 swiper-pagination-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>

Afin de rendre l'effet d'animation plus évident, j'ai ajouté une image d'arrière-plan à chaque diapositive.
Ensuite, initialisez-le en JS et ajoutez l'attribut d'animation de tournage de page.

 var swiper = new Swiper('.swiper-container',{
            pagination:'.swiper-pagination',
            paginationClickable:true,
            nextButton:'.swiper-button-next',
            prevButton:'.swiper-button-prev',
            effect:'fade'   //动画效果：渐变
        });

De cette façon, l'animation de rotation de page en dégradé est réalisée. C'est très simple, il suffit d'ajouter un attribut (effet : 'fade') dans l'initialisation

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