首頁 > web前端 > html教學 > swiper的使用(一)

swiper的使用(一)

黄舟
發布: 2017-01-20 15:09:19
原創
2130 人瀏覽過

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

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

以及方法和回調函數。

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

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

1

2

<link rel="stylesheet" href="swiper.css">

<script src="swiper.js"></script>

登入後複製

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

1

<div class="swiper-container">

登入後複製

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

1

<div class="swiper-wrapper">

登入後複製

在內部容器當中加入每一個翻頁頁面

1

2

3

4

5

6

7

8

<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中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板