首頁  >  文章  >  web前端  >  swiper的使用(一)

swiper的使用(一)

黄舟
黄舟原創
2017-01-20 15:09:192087瀏覽

swiper是一個行動端的頁面滑動框架,我們可以使用這個框架來寫自己的履歷。

swiper當中除了頁面滑動意外,還提供了其他各種各樣的功能組件,供我們使用。

以及方法和回調函數。

我們先實作一個基本的swiper頁面,只有翻頁功能的頁面。

首先我們要先引用框架文件。 swiper.css 和 swiper.js

<link rel="stylesheet" href="swiper.css">
<script src="swiper.js"></script>

再建立一個外部容器。 swiper-cotainer

<div class="swiper-container">

然後在外部容器當中加入一個內部容器。 swiper-wrapper

<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 class="swiper-slide>页面内容</div>
</div>
</div>




然後在其中進行初始化

相關內容請關注PHP中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn