Grundlegende Verwendung von Swiper (13)

In diesem Inhalt stellen wir das Hinzufügen von Steuerschaltflächen zur Swiper-Seite vor (die das Wechseln zur vorherigen und nächsten Seite steuern können).

Erstellen Sie zunächst das grundlegende Swiper-Seitenlayout. Dann fügen wir hauptsächlich das Div der Umblätterschaltfläche (.swiper-button-next/prev) zum externen Container (.swiper-container) hinzu.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

Gehen Sie dann zum js-Teil, um das zu initialisieren Funktion und Bindung des Umblätterns. Die Klasse der Seitenschaltfläche.

var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                nextButton:'.swiper-button-next',//绑定下一页的控制按钮
                prevButton:'.swiper-button-prev'//绑定上一页的控制按钮
            });

Wir können die Farbe der Steuerschaltfläche über den Klassennamen ändern. Und wenn sich unsere Attribute ändern, ändern sich die Steuerschaltflächen in den entsprechenden Stil oder fügen Funktionen hinzu.

Das Obige ist der Inhalt der grundlegenden Verwendung von Swiper (13). Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website (www.php.cn)!