Utilisation de base du swiper (19)

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>

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

var swiper = new Swiper('.swiper-container',{
               pagination:'.swiper-pagination',
               slidesPerView:1,
               paginationClickable:true,
               spaceBetween:30,
               nextButton:'.swiper-button-next',
               prevButton:'.swiper-button-prev',
               keyboardControl:true  //开启键盘控制翻页
            });

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 (www.php.cn) !