Maison > interface Web > tutoriel HTML > Utilisation de base du swiper (19)

Utilisation de base du swiper (19)

黄舟
Libérer: 2017-01-20 15:46:49
original
1303 Les gens l'ont consulté

Dans ce contenu, nous présenterons comment ajouter la fonction de rotation de page de contrôle du clavier à la page swiper.
Commençons par créer la page swiper.

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU1</div>
                <div class="swiper-slide">H5EDU2</div>
                <div class="swiper-slide">H5EDU3</div>
                <div class="swiper-slide">H5EDU4</div>
                <div class="swiper-slide">H5EDU5</div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
Copier après la connexion


Ensuite, initialisez-le en js et définissez le style CSS.

var swiper = new Swiper(&#39;.swiper-container&#39;,{
               pagination:&#39;.swiper-pagination&#39;,
               slidesPerView:1,
               paginationClickable:true,
               spaceBetween:30,
               nextButton:&#39;.swiper-button-next&#39;,
               prevButton:&#39;.swiper-button-prev&#39;,
               keyboardControl:true  //开启键盘控制翻页
            });
Copier après la connexion

Comme ci-dessus, nous venons d'ajouter
keyboardControl: true dans l'initialisation pour que la page du swiper ait l'effet du contrôle clavier de la rotation des pages. Si vous ne l'ajoutez pas, vous ne pouvez pas utiliser le clavier pour contrôler le défilement des pages

Ce qui précède est le contenu de l'utilisation de base de swiper (19). Pour plus de contenu connexe, veuillez faire attention au). Site Web PHP chinois (m.sbmmt.com) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal