Utilisation de base du swiper (13)

Dans ce contenu, nous introduisons l'ajout de boutons de contrôle à la page du swiper (qui peuvent contrôler le passage à la page précédente et à la page suivante).

Construisez d’abord la mise en page de base du swiper. Ensuite, on ajoute principalement le div du bouton de changement de page (.swiper-button-next/prev) au conteneur externe (.swiper-container

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

On va ensuite dans la partie js pour initialiser le). fonction et lier la page tournante La classe du bouton de page.

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

Nous pouvons changer la couleur du bouton de contrôle grâce au nom de la classe. Et les boutons de contrôle changeront pour le style correspondant ou ajouteront des fonctions à mesure que nos attributs changent

Ce qui précède est le contenu de l'utilisation de base de swiper (13). Pour plus de contenu connexe, veuillez faire attention à). le site PHP chinois (www.php.cn) !