Grundlegende Verwendung von Swiper (15)

Dieses Mal stellen wir die Umblätteranimation auf der Swiper-Seite vor - den Verlaufseffekt
Da es ein Umblättern gibt, ist der Umblättereffekt für uns definitiv auch in Swiper verpackt, also verwenden wir es wird sehr praktisch.
Nehmen Sie zunächst die Grundeinstellungen für Layout und CSS-Stil vor.

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

Um den Animationseffekt deutlicher zu machen, habe ich jeder Folie ein Hintergrundbild hinzugefügt.
Dann initialisieren Sie es in JS und fügen Sie das Attribut der Umblätteranimation hinzu.

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

Auf diese Weise wird die Farbverlaufsanimation zum Umblättern von Seiten realisiert. Es ist sehr einfach, ein Attribut (Effekt: „Fade“) in die Initialisierung einzufügen

Das Obige ist der Inhalt der Swiper-Grundnutzung (fünfzehn). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!