Home >Web Front-end >HTML Tutorial >Basic use of swiper (19)

Basic use of swiper (19)

黄舟
黄舟Original
2017-01-20 15:46:491297browse

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(&#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  //开启键盘控制翻页
            });

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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:Basic use of swiper (18)Next article:Basic use of swiper (18)