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

Basic use of swiper (3)

黄舟
Release: 2017-01-20 15:11:32
Original
1316 people have browsed it

First implement a basic swiper page according to the content of the first lesson.
Then add attributes to the initialized js code.

Of course, don’t forget to quote the downloaded framework file in advance.
We first add the functional component of page turning navigation. It is convenient for us to confirm the vertical scrolling of the page and the style of navigation under vertical scrolling.

Add page navigation to the external container.

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
<div class="swiper-slide">页面内容</div>
</div>
<div class="swiper-pagination"></div>  //翻页导航的div
</div>
<script>
var swiper = new Swiper(&#39;.swiper-container&#39;,{
pagination:&#39;.swiper-pagination&#39;,   //绑定翻页导航
paginationClickable:true,        //设定可以点击翻页导航进行翻页
direction:&#39;vertical&#39;                //设定页面垂直翻页
});
</script>
Copy after login

This allows the page to scroll vertically.

The above is the basic use of swiper (3). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template