In this content, we will introduce how to add the keyboard control page turning function to the swiper page.
Let’s start by building the swiper page.
<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>
Then initialize it in js and set the CSS style.
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 //开启键盘控制翻页
});As above, we just added
keyboardControl:true in the initialization to make the swiper page have the effect of keyboard control page turning. If you don’t add it, you can’t use the keyboard to control page scrolling
The above is the content of the basic use of swiper (19). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com) !
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
